我有一个表格应用程序
按钮“Добавить”上的事件在我的标签中添加新行 - ＆gt;
addRowMainForm(){
this.rowDataMainForm.push({
nomer: '',
tip_podr: '',
tip_ray: '',
tocki_starta: '',
del: '',
})
}
addRowTochkiStartaForm(){
this.rowDataTochkiStartaForm.push({
nomer_t_s: '',
vel_x: '',
vel_y: '',
height: '',
geometry: '',
rockets: '',
delete: '',
})
}
addRowRocketForm(){
this.rowDataRocketForm.push({
tip_r: '',
tip_gch: '',
kol: '',
delete: '',
})
}
我有新行的问题，它们会重复出现。如果我为ex添加两个或更多新行。在addRowMainForm（）中，他们在addRowTochkiStartaForm（）中添加了。
add row in addRowTochkiStartaForm()
这是html模板 - ＆gt;
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h4 class="panel-title">
Подразделение
</h4>
</div>
<table class="table table-bordered">
<tr>
<th>Номер</th>
<th>Тип подразделения</th>
<th>Тип района</th>
<th>Точки старта</th>
<th>Удалить</th>
</tr>
<tr *ngFor="let row of rowDataMainForm; let mainFormIndex = index">
<td><input type="text" class="form-control"></td>
<td>
<select class="form-control">
<option selected>-----</option>
<option value="Д">Д</option>
<option value="Б">Б</option>
<option value="П">П</option>
</select>
</td>
<td>
<select class="form-control">
<option selected>-----</option>
<option value="Основной">Основной</option>
<option value="Запасной">Запасной</option>
<option value="Временный">Временный</option>
</select>
</td>
<td>
<div class="panel panel-default smaller">
<table class="table table-condensed table-bordered" >
<thead>
<tr>
<th>номер</th>
<th>радиус</th>
<th>X</th>
<th>Y</th>
<th>Высота</th>
<th>Геометрия</th>
<th>Ракеты</th>
<th></th>
</tr>
</thead>
<tr *ngFor="let newrow of rowDataTochkiStartaForm; let TochkiStartaFormIndex = index">
<td><input type="text" class="form-control"></td>
<td></td>
<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></td>
<td>
<div class="panel panel-default smaller">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>Тип</th>
<th>Тип ГЧ</th>
<th>Кол-во</th>
<th></th>
</tr>
</thead>
<tr *ngFor="let suchnewrow of rowDataRocketForm; let RocketFormIndex = index">
<td></td>
<td></td>
<td></td>
<td>
<button (click)="deleteRowRocketForm(RocketFormIndex)" type="button" class="btn btn-default" style="padding: 2px;">
Удалить
</button>
</td>
</tr>
</table>
<div class="panel-footer">
<div class="container-build">
<button (click)='addRowRocketForm()' type="button" class="btn btn-default" style="padding: 2px">
Добавить
</button>
</div>
</div>
</div>
</td>
<td>
<button (click)='deleteRowTochkiStartaForm(TochkiStartaFormIndex)' type="button" class="btn btn-default" style="padding: 2px">
Удалить
</button>
</td>
</tr>
</table>
<div class="panel-footer">
<div class="container-build">
<button (click)='addRowTochkiStartaForm()' type="button" class="btn btn-default" style="padding: 2px">
Добавить
</button>
</div>
</div>
</div>
</td>
<td>
<button (click)="deleteDataMainForm(mainFormIndex)" type="button" class="btn btn-default" style="padding: 2px">
Удалить
</button>
</td>
</tr>
</table>
<div class="panel-footer">
<div class="container-build">
<button (click)='addRowMainForm(mainFormIndex)' type="button" class="btn btn-default" style="padding: 2px">
Добавить
</button>
</div>
</div>
</div>
这是我的组件的属性
rowDataMainForm = [{
nomer: '',
tip_podr: '',
tip_ray: '',
tocki_starta: '',
del: '',
}];
rowDataTochkiStartaForm = [{
nomer_t_s: '',
vel_x: '',
vel_y: '',
height: '',
geometry: '',
rockets: '',
delete: '',
}];
rowDataRocketForm = [{
tip_r: '',
tip_gch: '',
kol: '',
delete: '',
}];
请帮助我，我能对行做什么不重复？
P.S。对不起我的英语不好。
答案 0 :(得分：1)
创建一个名为forms.class.ts的新文件并插入此代码：
export class MainForm {
nomer: string = '';
tip_podr: string = '';
tip_ray: string = '';
tocki_starta: string = '';
del: boolean = false;
tochkiStartaForms: Array<TochkiStartaForm> = [ new TochkiStartaForm() ];
}
export class TochkiStartaForm {
nomer_t_s: string = '';
vel_x: number = 0;
vel_y: number = 0;
geometry: string = '';
rockets: string = '';
delete: boolean = false;
rocketForms: Array<RocketForm> = [ new RocketForm() ];
}
export class RocketForm {
tip_r: string = '';
tip_gch: string = '';
kol: string = '';
delete: boolean = false;
}
您现在只需要组件中的一个变量：
rowDataMainForm: Array<MainForm> = [ new MainForm() ];
在HTML中引用*ngFor和(click)='add...事件中的子数组：
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h4 class="panel-title">
Подразделение
</h4>
</div>
<table class="table table-bordered">
<tr>
<th>Номер</th>
<th>Тип подразделения</th>
<th>Тип района</th>
<th>Точки старта</th>
<th>Удалить</th>
</tr>
<tr *ngFor="let row of rowDataMainForm; let mainFormIndex = index">
<td>
<input type="text" class="form-control">
</td>
<td>
<select class="form-control">
<option selected>-----</option>
<option value="Д">Д</option>
<option value="Б">Б</option>
<option value="П">П</option>
</select>
</td>
<td>
<select class="form-control">
<option selected>-----</option>
<option value="Основной">Основной</option>
<option value="Запасной">Запасной</option>
<option value="Временный">Временный</option>
</select>
</td>
<td>
<div class="panel panel-default smaller">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>номер</th>
<th>радиус</th>
<th>X</th>
<th>Y</th>
<th>Высота</th>
<th>Геометрия</th>
<th>Ракеты</th>
<th></th>
</tr>
</thead>
<tr *ngFor="let newrow of row.tochkiStartaForms; let TochkiStartaFormIndex = index">
<td>
<input type="text" class="form-control">
</td>
<td></td>
<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></td>
<td>
<div class="panel panel-default smaller">
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>Тип</th>
<th>Тип ГЧ</th>
<th>Кол-во</th>
<th></th>
</tr>
</thead>
<tr *ngFor="let suchnewrow of newrow.rocketForms; let RocketFormIndex = index">
<td></td>
<td></td>
<td></td>
<td>
<button (click)="deleteRowRocketForm(newrow.rocketForms, RocketFormIndex)" type="button" class="btn btn-default" style="padding: 2px;">
Удалить
</button>
</td>
</tr>
</table>
<div class="panel-footer">
<div class="container-build">
<button (click)='addRowRocketForm(newrow.rocketForms)' type="button" class="btn btn-default" style="padding: 2px">
Добавить
</button>
</div>
</div>
</div>
</td>
<td>
<button (click)='deleteRowTochkiStartaForm(row.tochkiStartaForms, TochkiStartaFormIndex)' type="button" class="btn btn-default" style="padding: 2px">
Удалить
</button>
</td>
</tr>
</table>
<div class="panel-footer">
<div class="container-build">
<button (click)='addRowTochkiStartaForm(row.tochkiStartaForms)' type="button" class="btn btn-default" style="padding: 2px">
Добавить
</button>
</div>
</div>
</div>
</td>
<td>
<button (click)="deleteDataMainForm(rowDataMainForm, mainFormIndex)" type="button" class="btn btn-default" style="padding: 2px">
Удалить
</button>
</td>
</tr>
</table>
<div class="panel-footer">
<div class="container-build">
<button (click)='addRowMainForm(rowDataMainForm)' type="button" class="btn btn-default" style="padding: 2px">
Добавить
</button>
</div>
</div>
</div>
</div>
你的add方法需要引用传递的数组：
addRowMainForm(arr: Array<any>) {
arr.push(new MainForm());
this.changeDetectorRef.detectChanges();
}
addRowTochkiStartaForm(arr: Array<any>){
arr.push(new TochkiStartaForm());
this.changeDetectorRef.detectChanges();
}
addRowRocketForm(arr: Array<any>){
arr.push(new RocketForm());
this.changeDetectorRef.detectChanges();
}
在你的删除方法中：
deleteRowMainForm(arr: Array<any>, rowNumber: number){
arr.splice(rowNumber, 1);
this.changeDetectorRef.detectChanges();
}
deleteRowTochkiStartaForm(arr: Array<any>, rowNumber: number){
arr.splice(rowNumber, 1);
this.changeDetectorRef.detectChanges();
}
deleteRowRocketForm(arr: Array<any>, rowNumber: number){
arr.splice(rowNumber, 1);
this.changeDetectorRef.detectChanges();
}