Werte von td erhalten, Eingabe in Angular

Question

Ich habe Schwierigkeiten, die Werte von innerhalb der Tabelle innerhalb von td und Eingaben zu bekommen. Ich habe versucht, auf den Button zu klicken und warne ihn, aber es wird undefiniert. Wie bekomme ich die Werte aus diesen Feldern? Die Felder sind Material, Einheit und Menge

html

<tr *ngFor="let addRow of row; let rowIndex = index"> 
    <td> 
    <select type="text" class="form-control" ngModel required #material> 
     <option *ngFor="let material of materials" [value]="material.id">{{ material.name }}</option> 
    </select> 
    </td> 
    <td><input type="text" class="col-md-10" placeholder="pcs, pack, bag etc..." #unit></td> 
    <td><input type="number" class="col-md-6" #quantity></td> 
    <td>10</td> 
    <td> 
    <button type="button" class="btn btn-sm btn-danger" (click)="onDeleteRow(rowIndex)"><i class="fa fa-trash-o" aria-hidden="true"></i> Remove</button> 
    </td> 
</tr> 
<button class = "btn btn-primary float-right" (click)="onCreate(material,unit,quantity)"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save</button> 

ts

onCreate(material, unit, quantity){ 
    alert(material); 
    } 

Answer 1

Hier ist der Code-Beispiel, das Sie eine Idee, um Ihr Problem zu lösen.

Hinweis: Seien Sie vorsichtig bei der JavaScript-Objektverweis.

// in html

<tr *ngFor="let addRow of row; let rowIndex = index"> 
    <td> 
    <select type="text" class="form-control" required #material= 'ngModel' [(ngModel)]="data[rowIndex].material"> 
     <option *ngFor="let material of materials" [value]="material.id">{{ material.name }}</option> 
    </select> 
    </td> 
    <td><input type="text" class="col-md-10" placeholder="pcs, pack, bag etc..." #unit= 'ngModel' [(ngModel)]="data[rowIndex].unit"></td> 
    <td><input type="number" class="col-md-6" #quantity= 'ngModel' [(ngModel)]="data[rowIndex].quantity"></td> 
    <td>10</td> 
    <td> 
    <button type="button" class="btn btn-sm btn-danger" (click)="onDeleteRow(rowIndex)"><i class="fa fa-trash-o" aria-hidden="true"></i> Remove</button> 
    </td> 
    <button class = "btn btn-primary float-right" (click)="onCreate(rowIndex)"><i class="fa fa-floppy-o" aria-hidden="true"></i> Save</button> 
</tr> 

// in ts

data:any = [ 
      {"material":"", "unit":"", "quantity":""} 
      ...... 
      ]; 

onCreate(rowIndex){ 
    alert(data[rowIndex]); 
    }