当列表初始化为空时使用 ngFor 创建 mat-option 元素

Question

我想更新 "specialisation" mat-select 中的值，当我 select 我的 "competence" mat-select 中的一项技能时。我使用 [(ngModel)] 将我的 var 与模型链接，但它不会更新列表。

我尝试使用 ngModel，angular & material 7.

HTML:

<mat-form-field>
  <mat-select name="competence_1_name" [(ngModel)]="competence_1.name">
    <mat-option>-- Faites un choix --</mat-option>
    <mat-option *ngFor="let competence of competences" value="{{competence.name | lowercase}}">{{competence.name}}</mat-option>
  </mat-select>
  <mat-label>Compétence</mat-label>
</mat-form-field>
[...]
<mat-form-field>
  <mat-select name="competence_1_spe_1" [(ngModel)]="competence_1.specialisation_1">
    <mat-option>-- Faites un choix --</mat-option>
    <mat-option *ngFor="let specialisation of competence_1.specialisation_list" value="{{specialisation | lowercase}}">{{specialisation}}</mat-option>
  </mat-select>
  <mat-label>Spécialisation</mat-label>
</mat-form-field><br>

主要class:

export class GeneratePnjComponent implements OnInit {

    competences: Array<Competence>;
    masteries: Array<string>;
    competence_1 = new Competence("");
    competence_2 = new Competence("");
    competence_3 = new Competence("");
    name: string;
    cost: number;
    time: number;
    ...
}

Class 技能:

export class Competence {
    name: string;
    mastery: string;
    specialisation_1: string;
    specialisation_2: string;
    specialisation_list: Array<string>;

    constructor(name: string) {
        this.name = name;
        this.specialisation_list = new Array<string>();
    }
}

预期结果：当我在列表 'competence_1_name'

中选择一个值时，列表 'competence_1_spe_1' 更新

实际结果：列表中没有值'competence_1_spe_1' 即使我选择了列表中的值'competence_1_name'

Answer 1

在Angular7 中，最好在表单中使用formGroup，因为您可以同时为每个值添加多个验证器。使用它们

您必须在打字稿文件中定义它。在此示例中，检查该字段是否为空。 (Validators.required)

export class GeneratePnjComponent implements OnInit {

    formGroup: FormGroup;

    ngOnInit() {
      this.formGroup = new FormGroup({
      'name': new FormControl(null, [Validators.required]),
      'specialisation_1': new FormControl(null, [Validators.required]),
      });
    }
}

更改您的 html 代码以使用 formgroup 而不是 ngModel 和 select 带有标签 [value]

<form (ngSubmit)="doSomething()">
  [...]
  <mat-form-field>
    <mat-select name="competence_1_name" formControlName="name">
      <mat-option>-- Faites un choix --</mat-option>
      <mat-option *ngFor="let competence of competences"
                  [value]="competence.name">{{competence.name}}</mat-option>
    </mat-select>
    <mat-label>Compétence</mat-label>
  </mat-form-field>
  [...]
  <mat-form-field>
    <mat-select name="competence_1_spe_1" formControlName="specialisation_1">
      <mat-option>-- Faites un choix --</mat-option>
      <mat-option *ngFor="let specialisation of competence_1.specialisation_list"
                  [value]="specialisation">{{specialisation}}</mat-option>
    </mat-select>
    <mat-label>Spécialisation</mat-label>
  </mat-form-field>
  <br>
  [...]
</form>

将 formGroup 的值复制到您的实体中

export class GeneratePnjComponent implements OnInit {
    [...]

    doSomething() {
      this.competence_1.name = this.formGroup.get('name').value;
      this.competence_1.specialisation_1 = this.formGroup.get('specialisation_1').value;
    }
}

Answer 2

可能与

重复

您需要使用此语法，[value]="competence.name"，但我不知道您是否可以管道 | lowercase。

您可以考虑将 [(ngModel)] 替换为 FormControls、FormGroups 或 FormBuilder。这会给你更多的灵活性。

Answer 3

没那么复杂。使用以下代码（相应地进行调整）。

    <form #f="ngForm">
  <select name="selectedCompetence" [(ngModel)]="selectedCompetence">
    <option *ngFor="let item of competences" [ngValue]="item">{{item.name}}</option>
  </select>

  <br />

  <select  name="selectedSpl" [(ngModel)]="selectedSpl">
    <option *ngFor="let item1 of selectedCompetence.specialisation_list" [value]="item1">{{item1}}</option>
  </select>

  <pre>{{f.value | json}}</pre>
</form>

当列表初始化为空时使用 ngFor 创建 mat-option 元素

Creating mat-option elements with ngFor when list initialized empty

angular

angular-material

ngfor