如何在选择标签中显示所选选项的附加数据

Question

这是id 和device 必须与所选选项一起显示的要求。如何使用 Angular 材质选择显示这些附加数据。

注意：不在选项中，而是在选定的输入标签中

       <mat-select required formControlName="sensorId">
          <mat-form-field class="w-100">
            <mat-label>
              <em class="fa fa-search f-20"></em>
            </mat-label>
            <input matInput #sensorFilter />
          </mat-form-field>
          <mat-option
            *ngFor="let sensor of sensors | filter: sensorFilter.value"
            [value]="sensor.name"
          >
            {{ sensor?.name | translate }}
          </mat-option>
        </mat-select>

这是传感器对象属性

public static fields: Array<string> = [
    'id',
    'object_id',
    'unit_type',
    'device',
    'sensor_type',
    'name'
];

1

Answer 1

如果我正确理解您的问题，您只需在 mat-option 元素中添加 id 和设备 id 作为插值。像这样的：

<mat-option *ngFor=" let widget of widgetsEnum | filter: widgetFilter.value" [value]="widget.id">
      {{ device.id }} {{ widget.id }} {{ widget.name }}
</mat-option>

由于您的代码中没有显示“设备”或“设备 ID”，因此我假设它在您的控制器中可用，并且称为 device。如果不是，您将需要在控制器中使其可用并为其指定适当的名称。我还假设当您说“id”时，您的意思是小部件 id，因为您的代码中没有列出其他 id。