Question

这是我的目标：

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

显示在带有编辑按钮的数据表中，如下所示：

当我点击编辑（例如我点击了 Hydrogen ）时，它应该填充为
name: 'Hydrogen', symbol: 'H'。

但现在我将符号列表下拉列表空了。

Demo

单击“添加”按钮时，弹出窗口将显示两个下拉列表：元素列表和符号列表。基于元素名称将出现符号列表。

现在当我单击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>

Answer 1

符号列表在方法elementSelectionChange中初始化，但是只有在元素列表选择发生变化时才会调用elementSelectionChange($event)。

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

你能做到的一种方法是，

elementSelectionChange(event) {
    this.loadSymbols(event.value);
}

loadSymbols(name) {
    let value = this.Elements.find(e => e.name === name);
    this.selectedElementSymbol = this.Symbols.filter(e => e.id === value.id);
    console.log(this.selectedElementSymbol);
}

然后在loadSymbols

中致电constructor

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

StackBlitz

Answer 2

在对话框中添加每个值后，您需要更新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);
  }

并且不要忘记从父对象originalform添加引用：

let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { element: element,originalform:this }
    });

希望这会有所帮助：）

修改

通过调用this comment，我更新了the following中的小提琴，以适应分页。

添加以下的分页器数据：

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

级联下拉菜单编辑不起作用？

2 个答案:

StackBlitz