Angular Материал: В моем списке выбора матов я пытаюсь динамически создавать опции списка матов с массивом объектов, но получаю ошибку?

Question

Я столкнулся со странной проблемой, из-за которой я не могу заполнить Материал mat-selection-list mat-list-option, который создается объектами вместо массива строк. Я получаю эту ошибку:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Вот мой соответствующий код:

@ViewChild("tagsList") tagsList
  public tags: any = [];
  public selectedTags: any = [];

  ngOnInit() {}



     constructor(
        private utilitiesService: UtilitiesService,
        private tagsService: TagsService,
        public dialogRef: MatDialogRef<AccountTagsAssociatorComponent>,
        @Inject(MAT_DIALOG_DATA) public data
      ) {
        this.selectedTags = data.tags
        this.tagsService.getAll().then(tags => {
          this.tags = tags.docs;
        })
      }

      selectOption(options) {
        this.selectedTags = this.tagsList.selectedOptions.selected.map(selectedOption => {
          return selectedOption.value
        })
      }

В моем HTML:

<mat-selection-list
    (selectionChange)="selectOption($event)"
     #tags >
    <mat-list-option [value]="tag.id" [selected]="selectedTags && selectedTags.indexOf(tag.id) > -1" *ngFor="let tag of tags; let i = index">
      {{tag.name}}
    </mat-list-option>
  </mat-selection-list>

Я что-то упускаю здесь очевидное?

Редактировать: я обновил свой код, чтобы показать немного больше о том, что происходит. У меня были некоторые конфликты с #tags и this.tags в моем компоненте, поэтому я изменил их. Однако это все еще не решило мою проблему: /

Answer 1

Использование канала KeyValue для итерации объектов:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

https://angular.io/api/common/KeyValuePipe

Затем можно получить доступ к свойствам объекта из значения, например item.value.prop1