Question

我认为我的问题是API提供了一个Object而不是一个数组。所以我需要将对象修改为数组？

这怎么办？ Object.assign？还是管道？有没有人有合适的榜样？我仍在学习Angular，这是我的第二个项目，所以我需要一些帮助;）

你到目前为止！

这是我的代码

从API获取数据 ..cant更改提供对象的API

KnowledgeBaseService

    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;
  }
}

WikiModel

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

}

模板 Begriffsdatenbank 乞eg Beschreibung 施拉格沃特 {{wikiItems.title}} {{wikiItems.text}} {{wikiItems.keyWords}}

    <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

在您的服务地图中，操作员必须返回 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

Answer 2

请记住，Http是异步。这意味着使用以下代码：

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

最后一个console.log行将总是未定义。

流程如下：

1）调用getwikiList（）。subscribe。

2）执行Http Get请求。

3）getwikiList（）方法返回。

4）此时您的console.log已执行，并且该值未定义。

5）从Get请求收到响应。

6）通知subscribe方法中定义的方法，并提供数据并将其设置到this.wikilist。

因此，只有在第6步之后，您才能获得数据。

如果您想查看自己的值，则需要在预订中的中移动日志记录，如下所示：

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

Answer 3

您还可以执行以下操作：

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

对我有用

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

3 个答案: