다음과 같은 서비스가 있습니다 :
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
-
답변 # 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
참조가 가득 차고 참조 변경 감지가 수행 중입니다. 테이블에 모든 데이터를 얻는 이유를 설명합니다. 그러나 오류도 전에 발생했습니다.
관련 자료
- 오류 - 정의되지 않은 'nota'속성을 읽을 수 없습니다 (자바 스크립트)
- reactjs - nodejs/react - 정의되지 않은 속성 '맵'을 읽을 수 없습니다
- npm - 각도로 정의되지 않은 속성 'prototype'을 읽을 수 없습니다
- javascript - 정의되지 않은 속성을 읽을 수 없으며 올바른 위치가 아닙니다
- TypeError cannot read property undefined - TypeError는 정의되지 않은 속성을 읽을 수 없습니다개츠비
- javascript - 왜 '정의되지 않은'deleteProduct '속성을 읽을 수 없습니다'오류가 발생합니다
- angular - formControlName 속성에서 "정의되지 않은 속성 '값'을 읽을 수 없습니다"받기
- java - 두 키의 모든 값을 얻기 위해 맵을 반복하는 방법
- reactjs - 사용자가 성공적으로 등록 할 때 정의되지 않은 속성 '데이터'를 읽을 수 없습니다
- javascript - typeerror - 배열 내에서 정의되지 않은 상태 개체의 '맵'속성을 읽을 수 없습니까?
- javascript - nodejs - typeerror : 정의되지 않은 'replace'속성을 읽을 수 없습니다
- javascript - typeerror - 정의되지 않은 react의 'label'속성을 읽을 수 없습니다
- ruby - 무한 루프를 얻는 이유는 무엇입니까?
- javascript - usehistory - 정의되지 않은 '푸시'속성을 읽을 수 없습니다
- node.js - nodejs 인증 시스템에서"typeerror - 정의되지 않은 '이메일'속성을 읽을 수 없습니다 "
- javascript - typeerror - 정의되지 않은 속성 '값'을 읽을 수 없습니다반응 형 미리보기
- javascript - 배열이 반복 끝에 도달하면 정의되지 않은 '사용자 이름'속성을 읽을 수 없습니다
- 포착되지 않은 typeerror - reactjs 애플리케이션에서 정의되지 않은 'map'속성을 읽을 수 없습니다
- javascript - 반응 17 - 정의되지 않은 속성 'props'를 읽을 수 없습니다
- javascript - typeerror - reactdatagrid에서 undefined 속성 'length'를 읽을 수 없습니다
- typescript - Angular에서 삭제 작업을 수행하려고 할 때 오류가 발생합니다
- typescript - 내 각도 프로젝트와 formio api 통합
- javascript - 객체 배열을 사용하여 데이터를 가져오고 표시하는 방법은 무엇입니까?
- angular - AngularJS의 다른 구성 요소에서 호출 될 때 Modal 호출 Button의 텍스트 변경
- javascript - typescript에서 정수 배열 필터링 - 각도 2
- angular - 오류 ts2322 - '정의되지 않은'유형은 '문자열'유형에 할당 할 수 없습니다
- javascript - 오류 ts7052 - 'abstractcontrol'유형에 색인 서명이 없기 때문에 요소에 암시 적으로 '임의'유형이 있습니다 'get'이라고 부르려고 했습니까?
- angular - ReactiveFormsModule을 사용하여 로그인 양식을 만들려고 할 때 두 가지 유형 오류가 발생합니다
- Angular 11 프로젝트의 typescript 파일에서 angular/flex-layout API를 사용하는 방법이 있습니까?
- angularjs - npm 패키지를 설치할 때 종속성 트리 오류를 해결할 수 없음
allUsers
초기화 시도 데이터를 할당하기 전에 변수 :