>

다음과 같은 서비스가 있습니다 :

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에서 테이블의 모든 데이터를 얻지 만 콘솔에는이 오류 만 있습니다.


  • 답변 # 1

    allUsers 초기화 시도  데이터를 할당하기 전에 변수 :

    this.allUsers = [];
    
    

  • 답변 # 2

    변경 감지가 발생할 때마다 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 에 대해 getter를 사용하지 않고 최적화 할 수 있습니다  대신 글로벌 users 를 만드십시오.  변수 ( allUsers 에서했던 것처럼) ) 및 this.userService.getUsers() 내에서 매핑을 수행하십시오.  콜백.

  • 답변 # 3

    maryrio7 답변 완료

    API를 비동기 적으로 호출하고 있습니다. 즉, 가져 오는 데 시간이 오래 걸릴 수 있습니다. 통화가 처리되는 동안 this.allUsers   undefined 남아 . 이 오류가 발생하는 이유입니다.

    두 번째로 비동기 작업이 완료되면 this.allUsers 참조가 가득 차고 참조 변경 감지가 수행 중입니다. 테이블에 모든 데이터를 얻는 이유를 설명합니다. 그러나 오류도 전에 발생했습니다.

관련 자료

  • 이전 서버 Laravel 및 reactjs에서 파일 다운로드
  • 다음 winapi - pywin32 - sendkeys를 다시 사용하기 전에"준비"를 감지 하시겠습니까?