Почему я получаю свойство 'карта' не определено

Question

У меня есть сервис, подобный этому:

public getUsers() {
  return this.httpClient.get(environment.BASE_URL + `api/all`);
}

И в компоненте я установил пользователя для таблицы ngx-bootstrap

import { Component, OnInit, PipeTransform } from "@angular/core";
import { UserService } from "./service.service";
import { IUser } from "./users.model";
import { Observable } from "rxjs";
import { map } from "rxjs/operators";

@Component({
  selector: "app-users",
  templateUrl: "./users.component.html",
  styleUrls: ["./users.component.css"]
})
export class UsersComponent implements OnInit {
  allUsers: IUser[];
  page = 1;
  pageSize = 4;
  collectionSize: any;
  constructor(private userService: UserService) {}

  ngOnInit() {
    this.userService.getUsers().subscribe((data: any[]) => {
      this.collectionSize = data.length;
      this.allUsers = data;
    });
  }
  get users(): IUser[] {
    // tslint:disable-next-line:max-line-length
    return this.allUsers.map((user, i) => ({ id: i + 1, ...user 
    })).slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize 
    + this.pageSize);
  }
}

Я всегда получаю ошибку TypeError: Cannot read property 'map' of undefined

Я пытался использовать .pipe(), но затем я получаю TypeError: Cannot read property 'pipe' of undefined

В моем DOM я получаю все данные в таблице, но только у меня есть эта ошибка в консоли.

Answer 1

Это происходит потому, что геттеры в Angular переоцениваются каждый раз, когда происходит обнаружение изменений.Поскольку allUsers заполняется асинхронно, есть время, когда оно не определено.Вот почему вы получаете эту ошибку.

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

this.allUsers = [];

Имейте в виду, что этот код будет работатькаждый раз, когда происходит обнаружение изменений:

return this.allUsers.map((user, i) => ({ id: i + 1, ...user 
 })).slice((this.page - 1) * this.pageSize, (this.page - 1) * this.pageSize 
+ this.pageSize);
}

Вам действительно нужно, чтобы он работал таким образом?Выполнение сопоставления каждый раз, когда происходит обнаружение изменений.Если нет, вы можете оптимизировать его, не используя метод получения для users, а вместо этого создать глобальную переменную users (как вы это сделали для allUsers) и выполнить сопоставление внутри обратного вызова this.userService.getUsers().

Answer 2

Для завершения ответа maryrio7

Вы делаете асинхронный вызов вашего API.Это означает, что ваша загрузка может занять много времени.Пока ваш звонок обрабатывается, this.allUsers остается undefined.Вот почему вы получаете эту ошибку.

Во второй раз, когда ваша асинхронная операция завершена, this.allUsers заполнен, и выполняется обнаружение изменений в ссылке.Это объясняет, почему вы получаете все свои данные в таблице.Но ошибка также произошла раньше.

Answer 3

Попробуйте инициализировать переменную allUsers, прежде чем присваивать данные:

this.allUsers = [];

Answer 4

Вместо добавления одной дополнительной строки самое короткое из возможных решений для этого может быть инициализировано allUsers, когда вы их определяете, поэтому просто измените

allUsers: IUser[]; 

на

allUsers: IUser[]=[];