Angular: ошибка: привязка ngFor к массиву (аргумент неверного канала) - PullRequest
Новая
       30

Angular: ошибка: привязка ngFor к массиву (аргумент неверного канала)

0 голосов
/ 17 апреля 2020

Обратите внимание, что другие вопросы по той же ошибке не помогли, потому что я использую другой способ получения данных.

Я хочу получить JSON данные из API и показать их в страница с использованием Angular .My json данных состоит из массива faq в faqlist. Я хочу получить заголовок и идентификатор из каждого элемента массива и показать их на странице с помощью директивы ngFor.

У меня есть успешно извлекли данные из API.

Я пытаюсь связать его с помощью директивы ngFor, но получаю следующую ошибку. Я понятия не имею, что я делаю неправильно, если какое-либо тело может помочь мне, что будет полезно. Ниже приведены мой код и ошибка. 

                                  **ERROR**

ERROR JSON DATA enter image description here

OUTPUT (this.faqq) enter image description here

enter image description here

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. компонент. 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});
  }

1 Ответ

0 голосов
/ 17 апреля 2020

Попробуйте с 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(). В исходном коде вы присвоили массив faqq, а не Observable массива.

...