Javascript 将@Output（）与动态添加的组件一起使用

我正在创建一个购物清单。 它将由两部分组成：

购物车

和

购物物品

购物车有一个按钮，可在

中动态添加新购物项目

添加后的购物项目可以标记为活动或未标记，因此我创建了一个事件管理器，用于更改标记/未标记的值。 但由于该组件是动态添加的，我不知道在购物车组件中添加它的位置

我怎样才能让它像这样工作：

添加购物项目后，它会出现在一个带有标记/未标记值的数组中，当在购物项目组件中单击它时，该值会发生变化

干杯

购物物品.ts文件：

export class ShoppedItemComponent implements OnInit {

  _ref:any;   
  removeObject(){
    this._ref.destroy();
  } 

  @Output() statusChange = new EventEmitter<{status: boolean}>();

  marked;

  unmarkItem () {
    this.marked = !this.marked;
    this.statusChange.emit({status: this.marked});
  }


  constructor() {    
   }

}

  <div #boughtItems>
    <button (click)="addItem()">ADD</button>
  </div>

购物车.html文件：

export class ShoppedItemComponent implements OnInit {

  _ref:any;   
  removeObject(){
    this._ref.destroy();
  } 

  @Output() statusChange = new EventEmitter<{status: boolean}>();

  marked;

  unmarkItem () {
    this.marked = !this.marked;
    this.statusChange.emit({status: this.marked});
  }


  constructor() {    
   }

}

  <div #boughtItems>
    <button (click)="addItem()">ADD</button>
  </div>

添加

为什么要手动创建组件

我会在视图中使用*ngFor

<div #boughtItems>
  <button (click)="addItem()">ADD</button>
  <div *ngFor="let item of items">
    <app-item-bought xxxx="item" (markToggle)="myFunction(item)"></app-item-bought>
  </div>
</div>

添加

其中xxxx是类ShoppedItemComponent的一个字段，用输入（'xxxx'）修饰。 （markToggle）是ShoppedItemComponent中发射器的名称，myFunction（item）是购物车中定义的函数，它将接收触发事件的项目

---

希望有帮助

但是addItem（）方法应该是什么呢？我没有所有的代码，但是我想在购物车中你会有一个购物物品的列表（在*ngFor中的“物品”）。此外，您只需将项目添加到列表中，视图就会顺利刷新