填充 angular material 中的值自动完成不起作用

Question

我已将 angular material 自动完成 select 添加到我的表单中。问题是值不会填充到下拉列表中。

下面是我正在使用的代码片段。

我考虑过一个字符串数组，它的对象有两个属性。例如：Id 和 CityName
在 angular material 自动完成中，我通过循环此数组来绑定它们，但没有绑定任何值。

Html 标记

        <div class="col-md-4">
          <div class="form-group">
            <label for="city">City</label>
            <mat-form-field class="example-full-width d-block">
              <input
                type="text"
                [matAutocomplete]="auto"
                matInput
                placeholder="Select city"
                class="form-control border"
              />
              <mat-autocomplete #auto="matAutocomplete">
                <mat-option *ngFor="let option of options">
                  {{ option.name }}
                </mat-option>
              </mat-autocomplete>
            </mat-form-field>
          </div>
        </div>

.ts代码

export class CustomerEditComponent implements OnInit {
  constructor() {}

  options: CityMaster[];
  selectedOption: string;

  ngOnInit(): void {
    this.options = [
      { id: 1, cityName: "Mumbai" },
      { id: 2, cityName: "Delhi" },
      { id: 3, cityName: "Banglore" },
      { id: 4, cityName: "Lucknow" }
    ];
  }
}

我一定要使用 Observable 来绑定值吗？

Answer 1

options中的属性是cityName，html中绑定的是name

<div class="col-md-4">
  <div class="form-group">
    <label for="city">City</label>
    <mat-form-field class="example-full-width d-block">
      <input type="text" [matAutocomplete]="auto" matInput placeholder="Select city" class="form-control border" />
      <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let option of options" [value]="option.id">
          {{ option.cityName }}
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
  </div>
</div>

填充 angular material 中的值自动完成不起作用

Populate values in angular material auto-complete not working

typescript

angular9