Создание элементов mat-option с помощью ngFor, когда список инициализируется пустым - PullRequest
Новая
       39

Создание элементов mat-option с помощью ngFor, когда список инициализируется пустым

0 голосов
/ 04 июня 2019

Я хотел бы обновить значения в "mat-select" специализации ", когда я выбираю навык в моем mat-select" компетенции ". Я связал свой var с моделью, используя [(ngModel)], но он не будет обновлять список.

Я пытался использовать ngModel, с углами и материалом 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>();
    }
}

Ожидаемый результат: список «компетенция_1_спид_1» обновляется, когда я выбираю значение в списке «компетенция_1_имя»

Фактический результат: нет значения в списке «компетенция_1_сп__», даже если я выберу значение в списке «компетенция_1_имя»

Ответы [ 3 ]

1 голос
/ 05 июня 2019

Возможный дубликат этого

Вам нужно использовать этот синтаксис, [value]="competence.name", но я не знаю, можете ли вы передать | lowercase.

Возможно, вы захотите заменить [(ngModel)] на FormControls , FormGroups или FormBuilder. Это даст вам больше гибкости.

1 голос
/ 05 июня 2019

Это не так сложно.Используйте приведенный ниже код (внесите соответствующие изменения). 

<code>    <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}}
1 голос
/ 05 июня 2019

В Angular 7 лучше использовать formGroup в формах, потому что вы можете добавить много валидаторов одновременно для каждого значения. Чтобы использовать их

  1. Вы должны определить его в файле машинописи. В этом примере убедитесь, что поле не пустое. (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]),
      });
    }
}
  1. Измените свой 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>
  1. Скопируйте значения 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;
    }
}
...