Question

当我调用Web API时，它返回结果，并在打字稿文件上对结果进行细化，如下所示（从控制台捕获的输出）

this.address [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Array]: [Array]

0: Array

0: Object
Description: "Sherbrooke, QC, J1E 3X3"
Highlight: "0-4"
Id: "CA|CP|A|9844581"
IsRetrievable: true
Text: "6366-1150 Rue Des Quatre-Saisons"

__proto__: Object

1: Object
Description: "Orléans, ON, K1C 2G2"
Highlight: "0-4"
Id: "CA|CP|A|69450|FRE"
IsRetrievable: true
Text: "6366 Av Mattice"

__proto__: Object

我正在尝试遍历此过程并对我所获得的信息进行自动完成

我能够使用div并在文本框中填充地址信息来进行以下迭代。

<div>
      <div *ngFor="let row of addresses; let i = index" >
        <div
          *ngFor="let addon of row; let j = index"
        >
          <input [value]="addresses[i][j].Text"
          />
        </div>
      </div>
    </div>

但是无法使用mat-option。如何使用mat-option

做类似地址[I] [j]的操作

  <mat-autocomplete #auto="matAutocomplete">
          <mat-option *ngFor="let addressess of addresses.Items;let i=index" [value]="addressess[i].Text">
            {{ addressess[i].Text }}
          </mat-option>
        </mat-autocomplete>
    </mat-form-field>

请建议我可以做些什么，以便我可以自动填写地址信息。

Answer 1

您似乎拥有的是“对象数组”数组...这就是为什么在到达“对象数组”之前，需要一个额外的ngFor（通过ng-container）遍历顶层数组的原因'。

HTML中的相关更改：

<mat-autocomplete #auto="matAutocomplete">
  <ng-container *ngFor='let filteredStates of states'>
  <mat-option *ngFor="let state of filteredStates" [value]="state.name">
    <img class="example-option-img" aria-hidden [src]="state.flag" height="25">
    <span>{{state.name}}</span> |
    <small>Population: {{state.population}}</small>
  </mat-option>
  </ng-container>
</mat-autocomplete>

在代码中，我还简单地打印了数组以更好地展示结构。

https://en.cppreference.com/w/cpp/string/basic_string/stol表示“对象数组”的数组
用于{em>对象数组的code sample

循环返回的输出，并使用Angular Material使其自动填充

1 个答案: