当我在“能力”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>();
}
}
预期结果:当我在列表“competence_1_name”中选择一个值时,列表“competence_1_spe_1”会更新
实际结果:即使我在列表“competence_1_name”中选择一个值,列表“competence_1_spe_1”中也没有值
事情并没有那么复杂。使用下面的代码(相应地进行调整)。
<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)