级联下拉列表编辑不能在角度工作吗？

Question

This is my object:

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

which is displayed in datatable with Edit buttons, like so:

When I click Edit (for example I clicked Hydrogen ) it should populate with
name: 'Hydrogen', symbol: 'H' .

But now I am getting the Symbol List dropdown empty.

Demo

When I click the Add button, a pop up will come with two dropdowns: Element List and Symbol List . Based on the Element name Symbol List will come.

Now when I click the Edit button in datatable, that should populate that particular row in the popup. How can I do this?

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

The symbol list is initialized in the method elementSelectionChange , but you are calling elementSelectionChange($event) only when the Element list selection changes.

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

One way you can do it is,

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);
}

and then call loadSymbols in the constructor

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

StackBlitz

Answer 2

You shoule update datasource after each value added from the dialog, change your save() function like this:

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);
  }

And to not forget to add a referer to the parent object originalform from this:

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

Hope this helps:)

Edit:

By call of this comment , i updated the fiddle in the following to fit the paginating in.

Adding paginator figures as following:

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