* ngForの角入力フォーム

Question

<tr>タグが*ngForで生成されたときに<input>タグがテーブルの<tr>タグの内側に必要なときに、角2をどのように使用すればよいか混乱します。私の状況はこれです：私は "製品"の配列を持っています、私は<tr>タグの製品の情報を表示し、各製品のために、inputフィールドは、各製品の在庫を増やす必要があります。これは私がやっていることである。純粋なHTMLでProductStokeComponent.html

<form [formGroup]="form" (ngSubmit)="formSubmit()"> 
    <table> 
    <thead> 
     <tr> 
     <th>ID</th> 
     <th>Name</th> 
     <th>Stock</th> 
     <th>Stock Entrance</th> 
     </tr> 
    </thead> 
    <tbody formArrayName="products"> 
     <tr *ngFor="let product of products| async"> 
     <td>{{ product.id }}</td> 
     <td>{{ product.name }}</td> 
     <td>{{ product.stock }}</td> 
     <td> 
      <input type="number" name="stock[product.id]" > 
     </td> 
     </tr> 
    </tbody> 
    </table> 
    <button type="submit">Add Stock</button> 
</form> 

を

ProductStokeComponent.ts

export class ProductStokeComponent implements OnInit { 

    form: FormGroup; 
    products: Subject<Product[]> = new Subject(); 

    constructor(
    private productService: ProductService, 
    private formBuilder: FormBuilder, 
) { } 

    ngOnInit() { 
    this.formInit(); 
    this.getProducts(); 
    } 

    formInit() { 
    this.form = this.formBuilder.group({ 
     products: this.formBuilder.array([]) 
    }); 
    } 

    getProducts() { 
    this.productService.getProducts().subscribe(data => { 
     this.products.next(data); 
    }); 
    } 

} 

、私は名前の配列を廃止することができたが、2角度付き私は反応的なフォームを使用しようとしていますが、各製品のテーブルを生成するためにループの後にフォームを埋めるためにforループを使用する必要があります。方法反応性形と

更新

ProductStokeComponent.ts

ngOnInit() { 
    this.formInit(); 
    this.getProducts(); 
} 

formInit(product?: Product) { 
    this.form = this.formBuilder.group({ 
     products: this.formBuilder.array([]) 
    }); 
} 

ProductStokeComponent.html

<tbody formArrayName="products"> 

Answer 1

反応性ソリューションは、次のようになります。

<tr *ngFor="let product of form.controls['products'].controls"> 
     <td>{{ product.value.id }}</td> 
     <td>{{ product.value.name }}</td> 
     <td>{{ product.value.stock }}</td> 
     <td> 
      <input #moreStock> 
      <button (click)="addMoreStock(product.value, moreStock.value)">+</button> 
     </td> 
    </tr> 

それとも、テンプレートのフォームソリューションたい場合：どちらの場合も

<tbody> 
    <tr *ngFor="let product of products"> 
    <td>{{ product.id }}</td> 
    <td>{{ product.name }}</td> 
    <td>{{ product.stock }}</td> 
    <td> 
     <input #moreStock> 
     <button (click)="addMoreStock(product, moreStock.value)">+</button> 
    </td> 
    </tr> 
</tbody> 

を、あなたのtypescriptファイルに次のようにメソッドを追加します。

public addMoreStock(product, howMuch) 
{ 
    product.stock += parseInt(howMuch, 10); 
}