Javascript 层叠下拉编辑在角度模式下不起作用？

这是我的目标：

const ELEMENT_DATA: Element[] = [
    {id: 1, name: 'Hydrogen', symbol: 'H'},
    {id: 2, name: 'Hydrogen',  symbol: 'H1'},
    {id: 3, name: 'Helium',  symbol: 'He'}
];

在datatable中使用编辑按钮显示，如下所示：

当我单击编辑（例如，我单击了氢气）时，它应该填充

名称：“氢”，符号：“H”

但现在我得到的符号列表下拉列表为空

当我点击Add按钮时，会弹出两个下拉列表：元素列表和符号列表。基于元素名称的符号列表将出现

现在，当我单击datatable中的Edit按钮时，应该会在弹出窗口中填充该特定行。我该怎么做

html

<form  [formGroup]="addTaskForm"  (ngSubmit)="save()" >
    <mat-form-field>
    <mat-select formControlName="name" placeholder="Element List"  (selectionChange)="elementSelectionChange($event)">
        <mat-option *ngFor="let element of Elements" [value]="element.name">
        {{ element.name }}
        </mat-option>
    </mat-select>
    </mat-form-field>
    <mat-form-field>
    <mat-select  formControlName="symbol"  placeholder="Symbol List">
        <mat-option *ngFor="let element of selectedElementSymbol" [value]="element.symbol">
        {{ element.symbol }}
        </mat-option>
    </mat-select>
    </mat-form-field>

    <div mat-dialog-actions>

    <button mat-button (click)="onNoClick()">Cancel</button>
    <button type="submit"  mat-button cdkFocusInitial>Add</button>
    </div>
</form>

{{element.name}
{{element.symbol}
取消
添加

符号列表在方法

元素选择更改中初始化，但是
只有在元素列表选择发生更改时，您才调用
elementSelectionChange（$event）

 <mat-select formControlName="name" placeholder="Element List"  (selectionChange)="elementSelectionChange($event)">

然后在
构造函数中调用
loadSymbols

constructor() {
   if (data.element) {
      this.name = data.element.name;
      this.symbol = data.element.symbol;
      this.loadSymbols(this.name);
    }
}

符号列表在方法
elementSelectionChange
中初始化，但
只有在元素列表选择发生更改时，您才调用
elementSelectionChange（$event）

 <mat-select formControlName="name" placeholder="Element List"  (selectionChange)="elementSelectionChange($event)">

然后在
构造函数中调用
loadSymbols

constructor() {
   if (data.element) {
      this.name = data.element.name;
      this.symbol = data.element.symbol;
      this.loadSymbols(this.name);
    }
}

您应该更新
datasource
，在从对话框添加每个值后，更改
save（）
函数，如下所示：

save() {

    const data = this.data.originalform.dataSource.data;
    this.addTaskForm.value["id"]=data.length+1
    data.push(this.addTaskForm.value);
    this.data.originalform.dataSource=new MatTableDataSource<Element>(data); 
    console.log('working');
    console.log(this.addTaskForm.value);
  }

希望这有帮助：）

编辑：

通过调用，我更新了小提琴以适应分页

添加分页器图，如下所示：

this.data.originalform.dataSource.paginator=this.data.originalform.paginator;

您应该更新
datasource
，在从对话框添加每个值后，更改
save（）
函数，如下所示：

save() {

    const data = this.data.originalform.dataSource.data;
    this.addTaskForm.value["id"]=data.length+1
    data.push(this.addTaskForm.value);
    this.data.originalform.dataSource=new MatTableDataSource<Element>(data); 
    console.log('working');
    console.log(this.addTaskForm.value);
  }

希望这有帮助：）

编辑：

通过调用，我更新了小提琴以适应分页

添加分页器图，如下所示：

this.data.originalform.dataSource.paginator=this.data.originalform.paginator;

你能添加demo吗？事实上，我将把它存储在数据库中，并从数据库中检索。事实上，它存储在数据源中，而不是表中。当我添加新记录时，它会更新到数据源中，但计数不会更新。检查这里@itsme这些是你跟踪到表中的新功能：|，但我会检查出来。你能添加演示吗？事实上，我将把它存储在数据库中，并从数据库中检索。事实上，它存储在数据源中，而不是表中。当我添加新记录时，它会更新，但不会更新。检查这里@itsme这些是你跟踪到表中的新功能：|，但当我添加新记录时，我将签出.hai。它更新了it数据源，但计数未更新。当我添加新记录时，请检查此处hai。它更新了it数据源，但计数未更新。请检查此处