Angular:Error :binding ngFor to an array(Invalid Pipe argument)

Question

请注意，关于同一错误的其他问题没有帮助，因为我使用不同的方式获取数据。

我想从 API 获取 JSON 数据并使用 Angular.My 在页面中显示它们 json 数据由 [=41= 中的常见问题解答数组组成] 想从数组的每个元素中获取标题和 ID，并使用 ngFor 指令在页面中显示它们。

我已成功从 API 获取数据。

我正在尝试使用 ngFor 指令绑定它，但出现以下错误。我不知道我做错了什么 body 可以帮助我。下面是我的代码和错误。

                                  **ERROR**

JSON 数据

输出(this.faqq)

faq-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from "rxjs";
import { faqService } from "../faq.service";
import { Faq} from "../faq";
import { Router } from '@angular/router';
import { Token } from '../token';

@Component({
  selector: 'app-faq-list',
  templateUrl: './faq-list.component.html',
  styleUrls: ['./faq-list.component.css']
})
export class faqListComponent implements OnInit {

  token:Token;
  faqq:Observable<Faq[]>;

  constructor(private faqService: faqService,
    private router: Router) {
    }

  ngOnInit() {
    this.reloadData();

  }

  reloadData() {
    this.faqService.getToken()
      .subscribe(res => {
        this.token=new Token(res);

        this.faqService.getfaqList(this.token.access_token)
            .subscribe(res => {
              this.faqq=res.faqList.faq.map((faq:any)=> new Faq(faq));
              console.log(this.faqq);
              debugger;
          })
      })
  }

}

faq-list.component.html

<div class="panel panel-primary">
    <div class="panel-heading">
      <h2>Faq List</h2>
    </div>
    <div class="panel-body">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>Id :</th>
            <th>Title :</th>
            <th>excerpt :</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let faq of faqq |async">
            <td>{{faq.id}}</td>
            <td>{{faq.title}}</td>
            <td>{{faq.excerpt}}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

faq.service.ts

  getfaqList(token_t:String):Observable<any>{
    let body="";


    let header = new HttpHeaders()
      .set('Access-Control-Allow-Origin', '*')
      .set('Accept','application/json')
      .set('Content-Type', 'application/xml')
      .set('Authorization', 'Bearer ' + token_t);

    return this.http.post('url',body, {headers: header});
  }

Answer 1

像这样用 pipe 试试：

reloadData() {
    this.faqService.getToken()
      .subscribe(res => {
        this.token=new Token(res);

        this.faqq = this.faqService.getfaqList(this.token.access_token)
            .pipe(map(res => res.faqList.faq.map((faq: any) => new Faq(faq)) ));
          })
      })
  }

| async 管道需要 Observable，这就是 pipe() returns。在您的原始代码中，您将数组分配给 faqq，而不是数组的 Observable。

Angular:Error :binding ngFor to an array(Invalid Pipe argument)

Angular:Error :binding ngFor to an array(Invalid Pipe argument)

angularjs-directive

angular