Angular - 从子组件获取数据？

Question

我有一个包含用户记录的表。有一个“标签”列，允许您使用一个或多个值来标记记录。

为此，我在该行上创建了一个编辑按钮。单击后，我会显示一个已包装在 ngIf 中的组件。

<span *ngIf="inEditMode(r.RuleParentID, a.AttributeID)">
 <app-inline-select [selected]="a" [source]="fetchSourceList(a.AttributeID)" [ruleParentID]="r.RuleParentID" [attributeID]="a.AttributeID"></app-inline-select>
</span>

包含的组件利用Select2允许多选输入字段。

这一切都工作得很好。但是，我现在需要在父组件中添加一个Save Button，它将向我的服务发送一些数据。不过，我需要来自此包含组件的数据。

在一些研究过程中，我认为 ViewChild 可能是一个选项，但该组件在 ngFor 循环中多次出现在页面上，因此它本质上是动态的，不允许我使用直接按名称调用它，这正是 ViewChild 所需要的。

我怎样才能获取数据？保存按钮与其本身包含的组件无关。

Answer 1

selected 是一个事件而不是属性，因此您需要将其包装在 () 而不是 [] 中。 您可以调用函数来确定触发选定事件时需要执行的操作。

<span *ngIf="inEditMode(r.RuleParentID, a.AttributeID)">
 <app-inline-select (selected)="saveToArray($event)" [source]="fetchSourceList(a.AttributeID)" [ruleParentID]="r.RuleParentID" [attributeID]="a.AttributeID"></app-inline-select>
</span>

在组件中

    arrays = []
    saveToArray(a) {
      this.array.push(a);
    }

然后

   onSave() {
     this.service.save(arrays).then(() => {})
   }

还有viewChildren您将在其中拥有一系列组件。因此您可以循环遍历每个组件并获取数据。

  @ViewChildren(InlineSelectComponent) alerts: QueryList<InlineSelectComponent>

  ngAfterViewInit() {
    this.alerts.forEach(instance => console.log(instance));
  }