数据是否不在使用角度下拉列表中填充？

Question

I have datatable which will show the elements with edit button also top of the page i have add button .

Add is for adding elements into list edit is for editing the particular row data

when user click add button one popup will come with two dropdownlist Element Name and Element symbol here based on Element Name selection Element symbol list will come.

My expectation >

when i click first row edit button(which means Hydrogen H ) same popup should open and we need to populate these Hydrogen(Element Name) and H(Element symbol) in dropdown like this

when i click 2nd row edit buttin (Hydrogen ,H1) it should populate these data

here is my Dialogue html

<h1 mat-dialog-title>{{data.element.ModalName.name}}  </h1>
<form  [formGroup]="addTaskForm"  (ngSubmit)="save()" >
<mat-form-field>
  <mat-select formControlName="name" placeholder="Element Name"
  (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="Element symbol">
    <mat-option *ngFor="let element of selectedElementSymbols" [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>{{data.element.ModalName.button}}</button>



</div>
</form>

Answer 1

You need to add (click)="onEditClick()" event to HTML of your popup button. Then in TS file add onEditClick(){} and there you can catch data you have chosen in dropdowns

Answer 2

store the selected table value to a variable like public

selected2 = this.options2[1].id ...

and bind with mat-option

<mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ 
    option.name }}</mat-option>
  </mat-select>

Answer 3

https://stackblitz.com/edit/angular-talrct-prnwvr

In above template I basically made two changes one on line 27 commented re initialization of element and in constructor to update list of symbols based on selection.