Переберите возвращенный вывод и сделайте его автозаполнением, используя Angular Material

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. Как я могу сделать что-то вроде адресов [I] [j] используя mat-option

  <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-контейнер), чтобы пройти массив верхнего уровня, прежде чем вы доберетесь до своего «массива объектов» ».

соответствующие изменения в 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>

В коде я также напечатал массив просто для лучшей демонстрации структуры.

• пример кода для массива 'массива объектов'
• образец кода для массива объектов