Question

当我在“能力”垫选择中选择一项技能时，我想更新“专业”垫选择中的值。我使用[(ngModel)]将我的变量与模型链接，但不会更新列表。

我尝试将ngModel与Angular和材质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>

主班：

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

技能课：

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_name”中选择一个值，列表“ competence_1_spe_1”中也没有值

Answer 1

在Angular 7中，最好在表单中使用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并选择带有标签[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

可能的this副本

您需要使用[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元素

3 个答案: