홈>2020-02-01 01:23

angular - 'map'속성이 정의되지 않은 이유는 무엇입니까?

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

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

angulartypescript

답변 # 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 참조가 가득 차고 참조 변경 감지가 수행 중입니다. 테이블에 모든 데이터를 얻는 이유를 설명합니다. 그러나 오류도 전에 발생했습니다.

Python2.net

angular - 'map'속성이 정의되지 않은 이유는 무엇입니까?

관련 자료