繰り返し角度2

Question

上の表のアプリケーション内の行は、私はテーブルのアプリケーション

ボタンのイベント「Добавитьは」私のtablleに新しい行を追加する必要がありそれらは繰り返される。私は元の2つ以上の新しい行を追加する場合。 addRowMainForm（）ではaddRowTochkiStartaForm（）に追加されました。

add row in addRowTochkiStartaForm()

and then i add a new row in addRowMainForm(), those three rows addRowTochkiStartaForm() repeated in addRowMainForm()

これは、HTMLテンプレートです - >

<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.私の英語のために申し訳ありません。

Answer 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; 
} 

あなたは今だけ、このようなあなたのコンポーネント内の1つの変数が必要になります。

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> 

そして、あなたのアドオンのメソッドは、渡された配列を参照する必要があります。

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(); 
} 

そして、あなたの削除の方法で：

あなたはNG・リピートを使用して変数にデータ行を追加しないのはなぜ

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(); 
}