在父组件中单击按钮时如何更改子组件的@input值(子组件位于* ngfor循环中)

时间:2019-05-09 03:40:04

标签: html angular typescript

当我单击按钮时,我想更改折扣的输入值。

//parent.component.html
<button mat-raised-button (click)="addDiscount(5)" >5</button>
<div *ngFor="let items of itemSelected">
    <item-box [quantity]="quantity" [discount]="discount">
     </item-box>
 </div>



 //parent.component.ts
    discount: number = 0;

     addDiscount(disc: number){
       this.discount = disc;
      }

1 个答案:

答案 0 :(得分:0)

从您的代码看来,更改父属性会将更改后的值传递给每个子组件

<button (click)="addDiscount(5)">Click Me to Send Data to Child</button>
 <div *ngFor="let item of items" >
  <br>
  <app-child [discount]="discount" [childToMaster]=master 
  (childToParent)="childToParent($event)">
 </app-child>
</div>

Parent-Child-Interaction Code Demo showing changing parent property is accessible in all child components