[英]The selected value of the select attribute is not displayed. TypeScript/Angular
I don't see anything in the item selection window. The elements are loaded from the Web APi server.我在项目选择window中没有看到任何内容。元素是从Web APi服务器加载的。 Here is the photo of problem .
这是问题的照片。
carsDynamic!: Array<Car>
private loadDynamicData(){
this.dynamic.getDynamicCars().subscribe((data: Car[]) => {
this.carsDynamic = data
})
<select class="form-control" [(ngModel)]="editedSale.carId">
<option disabled selected>--Select--</option>
<option *ngFor="let car of carsDynamic"
value={{car.id}}>
{{car.brandName}}
</option>
</select>
How to fix this problem?如何解决这个问题?
Problem originates from [(ngModel)]="editedSale.carId"
.问题源于
[(ngModel)]="editedSale.carId"
。 You have to choose, either template driven from or reactive form.你必须选择,要么是模板驱动,要么是反应形式。
@Component({
selector: 'select-reset-example',
templateUrl: 'select-reset-example.html',
styleUrls: ['select-reset-example.css'],
})
export class SelectResetExample {
dynamic = new ReplaySubject<any>(1);
carsDynamic: any[];
data = [
{ id: 1, brandName: 'Audi' },
{ id: 2, brandName: 'BMW' },
];
constructor() {
this.loadDynamicData();
this.dynamic.next(this.data);
}
private loadDynamicData() {
this.dynamic.subscribe((data: Car[]) => {
this.carsDynamic = data;
});
}
onSelect(event: any) {
console.log(event.target.value);
}
}
export interface Car {
id: number;
brandName: string;
}
<select class="form-control" (change)="onSelect($event)">
<option disabled selected>--Select--</option>
<ng-container *ngFor="let car of carsDynamic">
<option value="{{car | json}}">{{car.brandName}}</option>
</ng-container>
</select>
<select class="form-control" (change)="onSelect($event)">
<option disabled selected>--Select--</option>
<ng-container *ngFor="let car of carsDynamic">
<option value="{{car.id}}">{{car.brandName}}</option>
</ng-container>
</select>
<select class="form-control" (change)="onSelect($event)">
<option disabled selected>--Select--</option>
<ng-container *ngFor="let car of carsDynamic">
<option value="{{car.brandName}}">{{car.brandName}}</option>
</ng-container>
</select>
Look into console log.查看控制台日志。 Working example: https://stackblitz.com/edit/angular-material-matselect-ybbg2t?file=app%2Fselect-reset-example.ts
工作示例: https://stackblitz.com/edit/angular-material-matselect-ybbg2t?file=app%2Fselect-reset-example.ts
I found the cause of the malfunction.我找到了故障原因。 The fact is that I downloaded the wrong data model from the server
事实是我从服务器下载了错误的数据model
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.