Angular Material Select 仅展示JSON数据中waterType字段并传值至后端的实现疑问

兄弟，我懂你现在的困惑——用keyvalue管道把整个JSON的所有字段都给显示出来了，完全不是你想要的只展示waterType选项的效果对吧？别着急，咱们一步步来解决这个问题：

核心问题：别再用keyvalue管道啦！ #

keyvalue是用来遍历对象的键值对的，但你的数据结构是waters数组，每个数组元素是包含waterType的对象，直接遍历数组就好，根本不需要用这个管道。

第一步：在组件里预处理数据，提取需要的选项 #

先把服务返回的waters数组转换成下拉框需要的格式，这样既能只展示waterType，还能方便后续把对应的值传给后端（比如可以绑定id或者直接绑定waterType，看后端需求）。

组件代码示例：

import { Component, OnInit } from '@angular/core';
import { WaterServiceService } from './water-service.service';
import { List_Water_Type } from './your-model-path'; // 记得导入你的数据模型

@Component({
  selector: 'app-water-select',
  templateUrl: './water-select.component.html',
  styleUrls: ['./water-select.component.css']
})
export class WaterSelectComponent implements OnInit {
  // 定义下拉框需要的选项数组，格式为{实际值, 显示文本}
  waterOptions: {value: string, viewValue: string}[] = [];
  // 存储选中的选项值，用来传给后端
  selectedWaterValue: string | null = null;

  constructor(private waterService: WaterServiceService) {}

  ngOnInit(): void {
    this.waterService.getWaters().subscribe((waters: List_Water_Type[]) => {
      // 把原始waters数组映射成下拉框需要的格式
      this.waterOptions = waters.map(water => ({
        value: water.id, // 如果后端需要传id就用这个，要传waterType就换成water.waterType
        viewValue: water.waterType
      }));

      // 可选：如果存在重复的waterType，添加去重逻辑避免下拉框出现重复选项
      this.waterOptions = Array.from(new Set(this.waterOptions.map(opt => opt.viewValue)))
        .map(uniqueType => this.waterOptions.find(opt => opt.viewValue === uniqueType)!);
    });
  }

  // 把选中的值提交到后端的方法
  submitSelectedValue(): void {
    if (this.selectedWaterValue) {
      // 这里调用你的后端接口，比如：
      // this.waterService.sendWaterData(this.selectedWaterValue).subscribe(...);
      console.log('即将传到后端的值：', this.selectedWaterValue);
    }
  }
}

第二步：模板中使用Angular Material Select #

直接遍历我们预处理好的waterOptions数组，不需要keyvalue，这样下拉框就只会显示waterType的内容了：

<mat-form-field appearance="fill">
  <mat-label>选择水质类型</mat-label>
  <!-- 用ngModel绑定选中的值，要是用响应式表单就换成formControl -->
  <mat-select [(ngModel)]="selectedWaterValue">
    <mat-option *ngFor="let option of waterOptions" [value]="option.value">
      {{ option.viewValue }}
    </mat-option>
  </mat-select>
</mat-form-field>

<!-- 点击按钮提交到后端 -->
<button mat-raised-button color="primary" (click)="submitSelectedValue()">提交到后端</button>

补充说明 #

• 如果你的后端只需要waterType的文本值，那把value换成water.waterType就可以；如果需要对应数据的id，就保留water.id，这样提交的时候就能把正确的值传给后端。
• 去重逻辑是可选的，如果你的waterType不会重复，可以直接去掉那部分代码。

备注：内容来源于stack exchange，提问作者Mustafasan