Question

我正在努力使默认选择的选项在我的Angular 7（材料）应用程序中工作。

这是模型：

export class Zone extends Resource {
  id: number;
  name: string;
  active: boolean;
  sensor: TemperatureSensor;
}

export class TemperatureSensor extends Resource {
  id: number;
  name: string;
  mqttTopic: string;
  zone: Zone;
}

从 SpringBoot REST 中检索到的数据。我使用 angular4-hal 模块轻松创建服务以与服务器通信。

这是表单字段的代码：

<mat-form-field>
<select matNativeControl placeholder="Temp. sensor" [(ngModel)]="zone.sensor" name="sensor" [formControl]="sensorControl">
    <option *ngFor="let temperatureSensor of temperatureSensors" [ngValue]="temperatureSensor">
        {{temperatureSensor.name}}
    </option>
</select>
</mat-form-field>

在控制器中，我还尝试强制使用该值：

sensorControl = new FormControl('');
ngOnInit() {
    this.getTemperatureSensors();
    this.getZone(this.route.params);
}

getZone(theParams: Observable<Params>) {
    theParams.subscribe(params => {
        const id = params.id;
        if (id) {
            this.zoneService.get(id).subscribe((zone: Zone) => {
                if (zone) {
                    this.zone = zone;
                    this.sensorControl.setValue(zone.sensor);
                } else {
                    console.log(`Zone with id '${id}' not found, returning to list`);
                    this.gotoList();
                }
            });
        }
    });
}
getTemperatureSensors() {
    this.temperatureSensorService.getAll().subscribe(temperatureSensors => {
        this.temperatureSensors = temperatureSensors;
    });
}

无法正常工作。

有人知道如何实现吗？

提前谢谢！

角材料选择默认选择的选项

0 个答案: