Angular 6 尝试比较 '[object Object]' 时出错。仅允许数组和可迭代对象

Question

我认为我的问题是 API 提供的是对象而不是数组。那么我需要将对象修改为数组吗？

这是怎么做到的？
对象.分配？
还是管道？
有人有合适的例子吗？

我仍在学习 Angular，这是我的第二个项目，所以我需要一些帮助;)

你到目前为止!

这是我的代码

从API获取数据 ..无法更改它提供对象的 API

知识库服务

    import {Injectable, OnInit} from '@angular/core';
    import { HttpClient, HttpErrorResponse, HttpHeaders, HttpRequest, HttpResponse} from '@angular/common/http';
    import {environment} from '../../environments/environment';
    import { WikiModel } from '../../models/wikiItems.model'
    import {catchError, map, take} from 'rxjs/operators';
    import {throwError} from 'rxjs';
    
    
    @Injectable()
    export class KnowledgeBaseService {
      wikiApiUrl: string = environment.wikiApiUrl;
      wikiList: WikiModel[] = [];
     constructor(
    
      protected http: HttpClient,) {}
    
        getwikiList() {
          return this.http.get(this.wikiApiUrl + "/list")
            .pipe(map((data: any[]) => {return this.wikiList = data;
                }), catchError(error => {
                return throwError('Its a Trap!')
              })
            );
        }
    }

订阅该数据

KnowledgeBaseAdminComponent

import { Component, OnInit } from '@angular/core';
import { KnowledgeBaseService } from '../../../services/knowledge-base.service';
import { WikiModel } from '../../../../models/wikiItems.model';
import { map, take } from 'rxjs/operators';
import {keyframes} from '@angular/animations';

@Component({
  selector: 'app-knwoledge-center-admin',
  templateUrl: './knowledge-base-admin.component.html',
  styleUrls: ['./knowledge-base-admin.component.scss']
})
export class KnowledgeBaseAdminComponent implements OnInit {

  wikiList: WikiModel[] = [];
  displayDialog: boolean = false;
  editItem: WikiModel = null;

  constructor(private knowledgebaseService: KnowledgeBaseService) {

  }

  ngOnInit() {
    this.getwikiItems()
  }

  getwikiItems(): void {
    this.knowledgebaseService.getwikiList().subscribe(
      data => {
        this.wikiList = data
      },
      err => console.error(err),
      () => console.log('Wiki Items Geladen')
    );
    console.log(this.wikiList)
  }

  showDialogToAdd() {
    this.displayDialog = true;

  }  showDialogToEdit() {
    this.displayDialog = true;
  }
}

维基模型

export class WikiModel {
  title: string;
  text: string;
  keyWords: string;

}

模板

<div class="section section-wiki-admin-head">
  <h1 class="h-centered">Begriffsdatenbank</h1>
</div>
<div class="section section-wiki-admin-table">
  <div class="wiki-articles-table-container">
    <p-table [value]="wikiList">
       <ng-template pTemplate="header">
         <tr>
           <th>Begriff</th>
           <th>Beschreibung</th>
           <th>Schlagworte</th>
         </tr>
       </ng-template>
       <ng-template pTemplate="body" *ngFor="let wikiItems of wikiList">
         <tr>
           <td>{{wikiItems.title}}</td>
           <td>{{wikiItems.text}}</td>
           <td>{{wikiItems.keyWords}}</td>
         </tr>
       </ng-template>
     </p-table>
  </div>
</div>
<div class="section section-wiki-admin-footer">
  <div class="wiki-articles-table-toolbar">
    <button pButton id="wiki-a-new" class="ui-button-success wiki-a-footer-btn" type="button" icon="fa fa-plus" (click)="showDialogToAdd()" label="Neu"></button>
    <button pButton id="wiki-a-edit" class="ui-button-info wiki-a-footer-btn" type="button" icon="fa fa-edit"  (click)="showDialogToEdit()" label="Bearbeiten"></button>
    <button pButton class="ui-button-danger wiki-a-footer-btn"  type="button" icon="fa fa-trash" label="Löschen"></button>
  </div>
</div>
<p-dialog [header]="editItem && editItem? 'Bearbeiten' : 'Hinzufügen'" [(visible)]="displayDialog" [responsive]="true" showEffect="fade" [modal]="true" [width]="600">
  <div class="ui-g ui-fluid">

    <div class="ui-g-12">
      <div class="ui-g-4">
        <label for="wikiTitle">Titel</label>
      </div>
      <div class="ui-g-8">
        <input pInputText id="wikiTitle" />
      </div>
    </div>
    <div class="ui-g-12">
      <div class="ui-g-4">
        <label for="wikiText">Wiki Text</label>
      </div>
      <div class="ui-g-8">
          <textarea id="wikiText" [rows]="5" [cols]="35" pInputTextarea ></textarea>
      </div>
    </div>
<!-- TODO: change  textfield to P-chips -->
    <div class="ui-g-12">
      <div class="ui-g-4">
        <label for="wikikeywords">Schlagwörter</label>
      </div>
      <div class="ui-g-8">
        <input pInputText id="wikikeywords" />
      </div>
    </div>
  </div>
</p-dialog>

错误

ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

来自 API 的数据如下所示:

{
  "error": null,
  "status": 200,
  "result": [
    {
      "_key": "338330",
      "_id": "knowbaseItems/338330",
      "_rev": "XIQvCoG--",
      "title": "Test Eintrag",
      "text": "Lalala",
      "keyWords": [
        "test"
      ]
    },
    {
      "_key": "341705",
      "_id": "knowbaseItems/341705",
      "_rev": "XIHSQhy--",
      "title": "Personalpronomen",
      "text": "Fahren Schlitten",
      "keyWords": [
        "ich",
        "du",
        "er"
      ]
    }
  ],
  "code": "200"
}

Answer 1

在您的服务 map 中，运营商必须返回data.result

getwikiList() {
 return this.http.get(this.wikiApiUrl + "/list")
            .pipe(map((data: any) => data.result ), 
                  catchError(error => { return throwError('Its a Trap!')})
            );
}

像这样更新p表

<p-table  [value]="wikiList">
       <ng-template pTemplate="header">
         <tr>
           <th>Begriff</th>
           <th>Beschreibung</th>
           <th>Schlagworte</th>
         </tr>
       </ng-template>
       <ng-template pTemplate="body" let-wikiList>
         <tr>
           <td>{{wikiList.title}}</td>
           <td>{{wikiList.text}}</td>
           <td>{{wikiList.keyWords}}</td>
         </tr>
       </ng-template>
     </p-table>

stackblitz example 🚀