尝试区分';[对象对象]';时出现角度6错误。仅允许数组和迭代数 [英] Angular 6 Error trying to diff '[object Object]'. Only arrays and iterables are allowed
本文介绍了尝试区分';[对象对象]';时出现角度6错误。仅允许数组和迭代数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我认为我的问题是API传递的是对象而不是数组。所以我需要将对象修改为数组?
如何做到这一点? 对象。分配? 还是烟斗? 有谁有合适的例子吗? 我还在学习角度,这是我的第二个项目,所以我需要一些帮助;)
到目前为止!
以下是我的代码
从API获取数据 ..无法更改其传递对象的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;
}
模板 开户数据库 贝格里夫 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
接口数据如下:
{
"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"
}
推荐答案
服务地图操作员必须返回数据。结果
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>
这篇关于尝试区分';[对象对象]';时出现角度6错误。仅允许数组和迭代数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文