不显示选择属性的选定值。打字稿/角度答案

【问题标题】：The selected value of the select attribute is not displayed. TypeScript/Angular不显示选择属性的选定值。打字稿/角度
【发布时间】：2022-02-10 20:48:10
【问题描述】：

我在项目选择窗口中看不到任何内容。元素从 Web APi 服务器加载。这是photo of problem。

组件类

carsDynamic!: Array<Car>

private loadDynamicData(){
  this.dynamic.getDynamicCars().subscribe((data: Car[]) => {
  this.carsDynamic = data
})

HTML 页面

<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>

如何解决这个问题？

【问题讨论】：

carsDynamic 不是必须声明为公共的吗？
添加您的故障排除，以便验证您正在接收数据，并且数据采用您期望的格式。此外，[value]="car.id" 是一种更好的编码方式
@Kinglish 我得到了数据，甚至可以用它来编辑它们所属的其他数据

标签： html angular typescript

【解决方案1】：

问题源于[(ngModel)]="editedSale.carId"。您必须选择模板驱动或反应式表单。

@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>

查看控制台日志。工作示例：https://stackblitz.com/edit/angular-material-matselect-ybbg2t?file=app%2Fselect-reset-example.ts

【讨论】：

控制台日志显示了 id，但我仍然没有看到需要的参数
您在寻找什么参数？你说你什么都看不见。现在你看到了一些东西。使用{{car | json}}，您可以获得关于car 的所有数据。
我正在寻找品牌名称。将 ID 值传递给正确的值，但选择列表仍不显示品牌名称字段。
我添加了第三个选项来获得brandName 和<option value="{{car.brandName}}">{{car.brandName}}</option>。
我好像发现了一个问题：由于某种原因，从服务器返回的brandName值是空的

【解决方案2】：

我找到了故障的原因。事实是我从服务器下载了错误的数据模型

【讨论】：