このメソッドでは、テーブルの行を削除しません。
deleteRowAdressForm(){
this.rowDataMainForm.splice(1, 1);
}
rowDataMainForm = [{
name: '',
email: '',
tel: '',
adress: '',
delete: '',
}];
このメソッドは、行の最初の要素を削除します。テーブル内の行は削除しません。
更新後、ChangeDetectorRefを使用しますが、これはまだ機能しません
この完全なコード:
import {Component, OnInit, Input, ChangeDetectorRef} from '@angular/core';
@Component({
selector: 'tabletree',
templateUrl:'app/tabletree.component.html',
})
export class TableTreeComponent{
constructor(private changeDetectorRef: ChangeDetectorRef){
}
rowDataMainForm = [{
name: '',
email: '',
tel: '',
adress: '',
delete: '',
}];
rowDataAdressForm = [{
country: '',
city: '',
zipcode: '',
street: '',
delete: '',
}];
rowDataHomeForm = [{
home: '',
campus: '',
province: '',
area: '',
delete: '',
}];
addRowMainForm(mainFormIndex){
this.rowDataMainForm.push({
name: '',
email: '',
tel: '',
adress: '',
delete: '',
})
}
addRowAdressForm(){
this.rowDataAdressForm.push({
country: '',
city: '',
zipcode: '',
street: '',
delete: '',
})
}
addRowHomeCampusProvinceAreaForm(){
this.rowDataHomeForm.push({
home: '',
campus: '',
province: '',
area: '',
delete: '',
})
}
deleteRowAdressForm(addressFormIndex: number){
this.rowDataMainForm.splice(addressFormIndex, 1);
this.changeDetectorRef.detectChanges();
}
deleteRowStreetCityZipcodeForm(delRowStCZFormIndex: number){
this.rowDataAdressForm.splice(delRowStCZFormIndex, 1);
this.changeDetectorRef.detectChanges();
}
deleteRowHomeForm(homeFormIndex: number){
this.rowDataHomeForm.splice(homeFormIndex, 1);
this.changeDetectorRef.detectChanges();
}
}
そしてこのhtml
<div class="panel panel-default">
<div class="panel-heading text-center">
<h4 class="panel-title">
Подразделение
</h4>
</div>
<table class="table table-bordered">
<tr>
<th>name</th>
<th>email</th>
<th>tel</th>
<th>adress</th>
<th>delete</th>
</tr>
<tr *ngFor="let row of rowDataMainForm; let mainFormIndex = index">
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td>
<div class="panel panel-default smaller">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>country</th>
<th>city</th>
<th>zipcode</th>
<th>street</th>
<th></th>
</tr>
</thead>
<tr *ngFor="let newrow of rowDataAdressForm; let addressFormIndex = index">
<td></td>
<td></td>
<td></td>
<td>
<div class="panel panel-default smaller">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>home</th>
<th>campus</th>
<th>province</th>
<th>area</th>
<th></th>
</tr>
</thead>
<tr *ngFor="let suchnewrow of rowDataHomeForm; let homeFormIndex = index">
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<button (click)="deleteRowHomeForm(homeFormIndex)" type="button" class="btn btn-default" style="padding: 2px">Delete</button>
</td>
</tr>
</table>
<div class="panel-footer">
<div class="container-build">
<button (click)='addRowHomeCampusProvinceAreaForm()' type="button" class="btn btn-default" style="padding: 2px">Add row</button>
</div>
</div>
</div>
</td>
<td>
<button (click)='deleteRowStreetCityZipcodeForm(delRowStCZFormIndex)' type="button" class="btn btn-default" style="padding: 2px">Delete</button>
</td>
</tr>
</table>
<div class="panel-footer">
<div class="container-build">
<button (click)='addRowAdressForm()' type="button" class="btn btn-default" style="padding: 2px">Add row</button>
</div>
</div>
</div>
</td>
<td>
<button (click)='deleteRowAdressForm(addressFormIndex)' type="button" class="btn btn-default">Delete</button>
</td>
</tr>
</table>
<div class="panel-footer">
<div class="container-build">
<button (click)='addRowMainForm(mainFormIndex)' type="button" class="btn btn-default">Add row</button>
</div>
</div>
</div>
配列内のネストされたオブジェクトで変更検出が実行されていないため、更新は表示されません。2つのオプションがあります。
変更検出は参照の変更のみを検索するため、配列内の何かを変更するたびに、それを新しいオブジェクトとして割り当てます。
自分で変更検出をトリガーします(最初のオプションは自明なので、これを紹介します)
インポートChangeDetectorRef
:
import {ChangeDetectorRef} from '@angular/core';
ChangeDetectorRef
コンポーネントに注入します。
constructor(private changeDetectorRef: ChangeDetectorRef, /* other injections here */) {
// ...
}
メソッドでこれを使用して、変更を検出します。
deleteRowAdressForm(rowNumber: number){
this.rowDataMainForm.splice(rowNumber, 1);
this.changeDetectorRef.detectChanges();
}
テンプレートに加える必要のある変更:
*ngFor
使用するたびに、次のindex
ように変数を追加する必要があります。
*ngFor="let row of table; let rowIndex = index"
次に、(click)
削除イベントで次のように活用できます。
(click)="deleteRow(rowIndex)"
ここで使用法を使用してテンプレートを編集しましたが、上記のように削除関数にパラメーターを追加することを忘れないでください!
<div class="panel panel-default">
<div class="panel-heading text-center">
<h4 class="panel-title">
Подразделение
</h4>
</div>
<table class="table table-bordered">
<tr>
<th>name</th>
<th>email</th>
<th>tel</th>
<th>adress</th>
<th>delete</th>
</tr>
<tr *ngFor="let row of rowDataMainForm; let mainFormIndex = index">
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td><input type="text" class="form-control"></td>
<td>
<div class="panel panel-default smaller">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>country</th>
<th>city</th>
<th>zipcode</th>
<th>street</th>
<th></th>
</tr>
</thead>
<tr *ngFor="let newrow of rowDataAdressForm; let addressFormIndex = index">
<td></td>
<td></td>
<td></td>
<td>
<div class="panel panel-default smaller">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>home</th>
<th>campus</th>
<th>province</th>
<th>area</th>
<th></th>
</tr>
</thead>
<tr *ngFor="let suchnewrow of rowDataHomeForm; let homeFormIndex = index">
<td></td>
<td></td>
<td></td>
<td></td>
<td>
<button (click)="deleteRowHomeForm(homeFormIndex)" type="button" class="btn btn-default" style="padding: 2px">Delete</button>
</td>
</tr>
</table>
<div class="panel-footer">
<div class="container-build">
<button (click)='addRowHomeCampusProvinceAreaForm()' type="button" class="btn btn-default" style="padding: 2px">Add row</button>
</div>
</div>
</div>
</td>
<td>
<button (click)='deleteRowStreetCityZipcodeForm(/* ??? */)' type="button" class="btn btn-default" style="padding: 2px">Delete</button>
</td>
</tr>
</table>
<div class="panel-footer">
<div class="container-build">
<button (click)='addRowAdressForm()' type="button" class="btn btn-default" style="padding: 2px">Add row</button>
</div>
</div>
</div>
</td>
<td>
<button (click)='deleteRowAdressForm(addressFormIndex)' type="button" class="btn btn-default">Delete</button>
</td>
</tr>
</table>
<div class="panel-footer">
<div class="container-build">
<button (click)='addRowMainForm(mainFormIndex)' type="button" class="btn btn-default">Add row</button>
</div>
</div>
</div>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加