각도 2 언급 : API 호출 후 지시문에 배열 바인딩을 업데이트하는 방법

Question

이 패키지를 사용하고 있습니다. https://www.npmjs.com/package/angular2-mentions.

.ts file : 
    ngOnInit():void { 
    this.items.push("temp Name") 
    let __this = this 
    this._userService.getAll(1).subscribe(res => { 
     res.users.forEach(function (a,b) { 
     __this.items.push(a) 
     }) 
     console.log(__this.items) 
    }) 
    } 

.html 파일 :

<input type="text" [mention]="items" > 

배열을 업데이트하고 기존 배열에 결합되어있는 API의 데이터 만 지시어 [언급]이되고있다

에 포함 값 그래서 내 코드는 다음입니다 시작시 정적으로 초기화되었습니다!

Answer 1

어쩌면 당신은 당신이 당신의 데이터를 가져올 후 사실 일 것이

<input *ngIf="items.length > 0" type="text" [mention]="items"> 

설정하거나 다른 플래그와 같은 STH를 시도해야합니다.

데이터를 가져온 후에 입력을 렌더링하므로 작동 할 수 있습니다.

Answer 2

항목을 추가 한 후 배열의 전체 참조를 업데이트해야합니다. 당신이 배열에 새로운 데이터에 밀어 완료 후에는 그런 일을 할 필요가 :

이 모델 내부에 어떤 일이 변경된 경우가 있지만보기를, 당신이 수에 반영되지 않은 경우가 의미

this.__items = this.__items.slice(); 
this.ref.markForCheck(); 

Angular에 변경 사항을 감지 (로컬 변경 사항 감지)하고보기를 갱신하도록 알릴 필요가 있습니다.

당신이 할 수있는 일은 DoCheck 인터페이스의 구현입니다. 기본 변경 감지 알고리즘은 변경 감지 실행에서 참조로 바운드 속성 값을 비교하여 차이점을 찾습니다. ngDoCheck는 기본 알고리즘 외에도 지시문의 변경 사항을 확인하기 위해 호출됩니다.