почему возвращаемый массив машинописного текста отображается как '[объектный объект]' вместо Iterable для ngFor? - PullRequest
Новая
       8

почему возвращаемый массив машинописного текста отображается как '[объектный объект]' вместо Iterable для ngFor?

0 голосов
/ 30 октября 2018

Я пытаюсь создать простой набор строк (Iteratable) в машинописи и использовать Angular ngFor, чтобы отобразить их все на моей странице. Я пробовал несколько способов создания массива, но ни один из них не возвращал итерируемый обратно.

последнее усилие, которое я сделал, выглядит следующим образом. 

  vehicles: String[] = [];

  ngOnInit() {
    this.vehicles.push('vehicle 1');
    this.vehicles.push('vehicle 2');
    this.vehicles.push('vehicle 3');
    this.vehicles.push('vehicle 4');
    this.vehicles.push('vehicle 5');
    console.log(this.vehicles);
  }

Я тоже пробовал 

  vehicles = ['Vehicle 1', 'Vehicle 2', 'Vehicle 3', 'Vehicle 4', 'Vehicle 5'];

или 

  vehicles: ['Vehicle 1', 'Vehicle 2', 'Vehicle 3', 'Vehicle 4', 'Vehicle 5'];

даже 

  vehicles = <String[]>['Vehicle 1', 'Vehicle 2', 'Vehicle 3', 'Vehicle 4', 'Vehicle 5'];

но во всех случаях, когда я использую ngFor: 

<div *ngFor="let vehicle of vehicles">
    <div class="row" #row>
        <mat-card>{{vehicle}}</mat-card>
    </div>
</div>

Я получаю ошибку

Ошибка: не удается найти другой объект поддержки [[объект]] типа «объект». NgFor поддерживает только привязку к Iterables, таким как Массивы.

когда я печатаю console.log (this.vehicles), я получаю ожидаемый ответ:

[«Транспортное средство 1», «Транспортное средство 2», «Транспортное средство 3», «Транспортное средство 4», «Транспортное средство 5»]

как вернуть массив как массив Iterable, а не объект '[object Object]'?

Ответы [ 3 ]

0 голосов
/ 30 октября 2018

Ваш текущий код выглядит абсолютно нормально. Это требует некоторых изменений в html вместо печати vehicles, печати vehicle. 

<div *ngFor="let vehicle of vehicles">
    <div class="row" #row>
        <mat-card>{{vehicle}}</mat-card> <!-- vehicles is changed to vechicle -->
    </div>
</div>

Если вы снова столкнулись с той же ошибкой, значит, вы получаете эту ошибку из другого кода.

Выполните шаги для устранения проблемы

Дело 1

Удалить весь * ngFor сегмент и проверить, не появляется ли ошибка? 

<div></div>

Дело 2

Убедитесь, что следующий код выдает ошибку 

<div *ngFor="let vehicle of vehicles">
    {{vehicle}}
</div>

Дело 3

Убедитесь, что следующий код выдает ошибку 

<div *ngFor="let vehicle of vehicles">
    div class="row" #row>
        {{vehicle}}
    </div>
</div>
0 голосов
/ 30 октября 2018

Я понял это. Я изменил название объекта с транспортных средств на myObject, и это сработало. Я посмотрел в HTML-код и в не связанном месте я нашел этот код. 

  <mat-form-field>
    <mat-select [(ngModel)]="vehicle" name="vehicle" (selectionChange)="languageSelect()" #vehicles="ngModel">
    </mat-select>
  </mat-form-field>

# Vehicles = "ngModel" ранее прикрутил ngFor. Я не осознавал, что позже в коде были #vehicles, иначе это имело бы отношение к моему ngFor раньше. Я думаю, что я случайно оставил это из более раннего кода.

Я также изменил #vehicles на #myobjects, чтобы увидеть, появится ли ошибка снова. И да, это так. таким образом, проблема заключалась в названии или повторении кода.

0 голосов
/ 30 октября 2018

Вам необходимо заменить {{vehicle}} на {{vehicle}} в теге mat-card.

...