角输入形式进入* 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); 
}