Question

我有数据表，它会显示带有编辑按钮的元素，页面顶部还有我添加按钮。

添加用于将元素添加到列表编辑用于编辑特定行数据

当用户点击添加按钮时，一个弹出窗口将带有两个下拉列表元素名称和元素符号这里基于元素名称选择元素符号列表将会到来。

我的期望＆gt;

当我点击第一行编辑按钮（这意味着氢H）时，应打开相同的弹出窗口，我们需要在下拉列表中填充这些氢（元素名称）和H（元素符号）

当我点击第二行编辑丁基（氢，H1）时，它应该填充这些数据

这是我的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

您需要将(click)="onEditClick()"事件添加到弹出按钮的HTML中。然后在TS文件中添加onEditClick(){}，您可以在那里捕获您在下拉列表中选择的数据

Answer 2

将选定的表值存储到像public

这样的变量中

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

并使用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

在上面的模板中，我基本上在第27行进行了两次更改，注释了元素的初始化，并在构造函数中根据选择更新了符号列表。

使用angular时，数据不会在下拉列表中填充？

3 个答案: