时间戳

首页 > 解决方案 > 填充角度材料自动完成中的值不起作用

typescript - 填充角度材料自动完成中的值不起作用

问题描述

我在表单中添加了角度材料自动完成选择。问题是下拉列表中没有填充值。

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

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

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 来绑定值？

标签： typescriptangular9

解决方案

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>

推荐阅读