onclick 按钮弹出打开。弹出窗口包含输入字段。保存弹出窗口时，应在多选下拉列表中填充值答案

【问题标题】：onclick of button popup opens. popup contains input field. On save of popup, the values should be populated in multiselect dropdownonclick 按钮弹出打开。弹出窗口包含输入字段。保存弹出窗口时，应在多选下拉列表中填充值
【发布时间】：2021-10-23 21:19:41
【问题描述】：

numList: any[]=[];

addnumber() {
    const dialogRef = this.dialog.open(NumberpopUpComponent, {
       width: "500px",
       disableClose:true
    });
    dialogRef.afterClosed().subscribe((result) => {  
      this.numList = this.NoList;  //NoList is list of input value inside popup component
      this.numList.push(result);
    });
}

HTML：

<button type="button" (click)="addnumber()">
    Add Number
</button>

【问题讨论】：

这里为什么需要this.NoList，你从哪里得到这个列表？这是来自NumberpopUpComponent 吗？那么你如何在你的组件中使用this 来访问它呢？
感谢您的回复。我们需要 NoList，因为我们将该 NoList 数组分配给 numList 数组。这个 numList 数组是动态形式的模型。这就是我们访问字段的方式。 NoList 是一个在 NumberpopUpComponent 中定义的数组。无论用户在输入字段中给出什么，都将存储在 NoList 数组中。请帮助我如何最好地做到这一点。提前致谢
好的。因此，您需要从NumberpopUpComponent 获取 NoList。当用户点击保存按钮时，您需要将 NoList 和文本框中的值传递给 afterClosed() 订阅。
您将NoList 分配给numList，并将响应推送到numList。当您单击保存按钮时，numList 将包含 NoList + 文本框中的最后一个值。我说的对吗？
是的。但这里的问题是它没有显示在该下拉列表中。下拉菜单显示为空

标签： angular angular8 multi-select populate input-field

【解决方案1】：

当您点击对话框中的保存按钮时，使用MatDialogRef 关闭对话框。

@Component({...})
export class NumberpopUpComponent {
  noList;
  constructure(private dialogRef: MatDialogRef<NumberpopUpComponent> ) {}

  onSave() {
    this.dialogRef.close({
     noList: this.NoList, // pass NoList array here
     value: inputValue // pass input value here
    });
  }
}

包含对话框的组件

addnumber() {
    const dialogRef = this.dialog.open(NumberpopUpComponent, {
      width: "500px",
     disableClose:true
    });
    dialogRef.afterClosed().subscribe((data) => {
      if (data) {
        this.numList = data.NoList;
        this.numList.push(data.value);
      }
    });

【讨论】：