Question

我有一个包含用户记录的表。有一个＆＃34;标签列＃34;允许您使用一个或多个值标记记录。

为此，我在行上创建了一个编辑按钮。点击后，我会显示一个已包含在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>

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

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

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

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

Answer 1

选择的是一个事件而不是属性，因此您需要将其包装在（）而不是[]中。您可以调用函数来确定在选定的事件被触发时您需要做什么。

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

组件中的

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

然后

  @ViewChildren(InlineSelectComponent) alerts: QueryList<InlineSelectComponent>

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

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

{{1}}

Answer 2

要将子组件中的数据传递回父组件，可以使用EventEmitter。有一篇文章说明了如何做到这一点： https://stackoverflow.com/a/42109866/7194432

Angular - 从子组件获取数据？

2 个答案: