ngShow 표현

Question

내가 같이 모난 구성 요소 및 컨트롤러가 너무 일찍 평가

export class MyService { 

    static serviceId = 'myService'; 

    private http: ng.IHttpService; 

    constructor(private $http: ng.IHttpService) { 
     this.http = $http; 
    } 

    public getElements(): ng.IPromise<{}> { 
     return this.http.get('./rest/elements'); 
    } 

} 

내가 직면 문제는 배열이다 요소에는 onInit() 호출 후 빈 배열이 들어 있습니다. 그러나 나중에 getELements()의 success 함수가 호출되고 요소가 콘솔에 기록되기 때문에 데이터가 수신 된 것을 알 수 있습니다. 내 템플릿에 사용

요소는 특정 요소를 표시할지 여부를 결정합니다 :

<div> 
    <elements ng-show="vm.elements.indexOf('A') != -1"></elements> 
</div> 

문제는 이제 vm.elements 먼저 빈 배열을 포함, 단 후, 배열이 가득이다 실제 값. 그러나 템플릿의이 표현은 이미 평가되었습니다. 어떻게 바꿀 수 있습니까?

Answer 1

현재 구현이 의미가 없습니다. 목표를 달성하기 위해 약속 및 비동기 구문이이 언어로 작동하는 방식을 이해해야합니다. 다행히도 이것은 너무 어렵지 않습니다.

현재 구현의 문제점은 init 메소드가 빈 배열을 즉시 반환한다는 것입니다. 그것은 서비스 호출의 결과를 리턴하지 않으므로 컨트롤러의 속성은 원하는 것이 아닌 빈 배열에 다시 바인딩됩니다.

는 대신 다음과 같은 고려 :

이

export class MyController { 
    elements: string[] = []; 

    $onInit =() => { 
    this.getElements() 
     .then(elements => { 
     this.elements = elements; 
     }); 
    }; 

    getElements() { 
    return this.elementsService 
     .getElements() 
     .then(response => response.data) 
     .catch(() => { 
     this.errorReceived = true; 
     }); 
    } 
} 

당신은 위의 표준 try/catch 구문의 사용을 가능하게하는 방법을 async/await

export class MyController { 
    elements: string[] = []; 

    $onInit = async() => { 
    this.elements = await this.getElements(); 
    }; 

    async getElements() { 
    try { 
     const {data} = await this.elementsService.getElements(); 
     return data; 
    } 
    catch { 
     this.errorReceived = true; 
    } 
    } 
} 

공지 사항을 활용하여 읽기 쉽게 만들 수 있습니다. 이것은 async/await의 많은 장점 중 하나입니다.

주목할 가치가있는 또 하나의 점은 데이터 서비스가 data 속성의 응답을 해제하고 컨트롤러가 HTTP 서비스의 의미와 관련되지 않도록 반환해야한다는 것입니다.