角輸入形式進入* ngFor

Question

我對我應該如何與角2工作時，我需要<tr>標籤表中，當由*ngFor產生的<tr>標籤內<input>標籤有點困惑。我的情況是這樣的：我有一系列「產品」，我應該在<tr>標籤上顯示產品信息，並且對於每個產品，都應該顯示一個input字段以增加每個產品的庫存。這是我做了什麼：

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

} 

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> 

純HTML，我可以用一個命名的數組做掉，但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> 

在這兩種情況下，在您的打字稿文件中添加的方法是這樣的：

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