NgFor поддерживает только привязку к итерациям, таким как массивы angular8

Question

Я хочу восстановить данные из github и отобразить эти данные, но это дает мне ошибку.Код редактора подчеркивает this.followers в файле github-последователей.component.ts.

githup-последователей.component.html

<div *ngFor="let follower of followers" class="media">
    <div class="media-left">
        <a href="#">
            <img class="avatar media-object" src="{{ follower.avatar_url }}">
        </a>
    </div>
</div>

githup-последователей.component.ts

constructor(private service:GithubFollowersService) { }

  ngOnInit() {
    this.service.getAll()
    .subscribe(followers => this.followers = followers);
  }

githup-follow.service.ts

export class GithubFollowersService extends DataService {

  constructor(http:Http) {
    super('https://api.github.com/users/IDBRAHIMDEV/followers',http)
   }

data.service.ts

  constructor(private url : string ,private http : Http) { }

  getAll(){
    return this.http.get(this.url).
    pipe(
      catchError(
        this.handleError
      )   
    )}

Answer 1

Изменить свой код

в вашем сервисе добавить этот конструктор (частный http: Http) {}

getAll(): Observable<any> {
return this.http.get<any>(your api endpoint);
}

и в вашем компоненте подписаться на эту услугу Ошибка ясно говорит о том, что подписчик не является массивом, сначала объявите пустой массив

follower = [];
constructor(private service:Your servicename) { }
ngOnInit() {
this.service.getAll()
.subscribe(
            response => { this.follower = response },
            error => { console.log(error)
});

Answer 2

Переменная this.followers , вероятно, не Массив , а Объект .

Вы можете выполнять итерации с помощью метода Object.keys ().как это:

random.template.html

<div *ngFor="let follower of getKeys(this.followers)">

</div>

random.component.ts

  getKeys(obj) {
    return Object.keys(obj);
  }

ТакжеЭто хорошая идея, чтобы обернуть весь * ngFor в * ngIf в случае, если this.followers имеет значение null или не определено.

<div *ngIf="this.followers">
    <div *ngFor="let follower of getKeys(this.followers)">

    </div>
</div>

Answer 3

Предполагая, что followers - это массив , когда запрос завершается , единственная проблема состоит в том, что вы пытаетесь перебрать неопределенное значение, пока HTTP-вызов не вернется с результатом.Инициализируйте его в пустой массив:

followers = [];

constructor(private service:GithubFollowersService) { }

  ngOnInit() {
    this.service.getAll()
    .subscribe(followers => this.followers = followers);
  }

Answer 4

Инициализация подписчиков:

this.followers = []

Answer 5

Использование * ngIf:

<ng-container *ngIf="followers.length > 0">
<div *ngFor="let follower of followers" class="media">
    <div class="media-left">
        <a href="#">
            <img class="avatar media-object" src="{{ follower.avatar_url }}">
        </a>
    </div>
</div>
</ng-container>