將異步數據傳遞給組件作爲參數

Question

我試圖做一個自定義選擇組件，其數據異步加載並作爲參數傳遞。這是我的組件：

@Component({ 
    selector: 'custom-select-combo', 
    template: 
    `<select #CustomSelectCombobox 
     class="form-control" 
     [(ngModel)]="selectedOption" 
     (ngModelChange)="selectedOptionChange.emit($event)" 
     [attr.data-live-search]="true">   
      <option *ngFor="let item of items | async" [value]="item">{{item}}</option> 
    </select>` 
}) 
export class CustomSelectComboComponent extends AppComponentBase implements OnInit, AfterViewInit { 

    @ViewChild('CustomSelectCombobox') customSelectComboboxElement: ElementRef; 

    @Input() selectedOption: string = undefined; 
    @Input() items: string[]; 
    @Output() selectedOptionChange: EventEmitter<string> = new EventEmitter<string>(); 

    constructor(
     injector: Injector) { 
     super(injector); 
    } 

    ngOnInit(): void { 
     const self = this; 
     setTimeout(() => { 
      $(self.customSelectComboboxElement.nativeElement).selectpicker('refresh'); 
     }, 0); 
    } 

    ngAfterViewInit(): void { 
     $(this.customSelectComboboxElement.nativeElement).selectpicker({ 
      iconBase: 'famfamfam-flag', 
      tickIcon: 'fa fa-check' 
     }); 
    } 
} 

這是HTML：

<div class="col-xs-6"> 
    <custom-select-combo [items]="tipoItems"></custom-select-combo> 
</div> 

而這正是我加載數據：

tipoItems = []; 

constructor(
    injector: Injector, 
    private _tipoDadoService: TipoDadoServiceProxy, 
) { 
    super(injector); 
    this._tipoDadoService.getAllTipos() 
     .subscribe((result) => { 
      this.tipoItems = result; 
     }); 
} 

當我嘗試運行此實際代碼，我在控制檯中發現錯誤：

"ERROR Error: InvalidPipeArgument: '' for pipe 'AsyncPipe'"

還有很多

"ERROR TypeError: Cannot read property 'dispose' of null".

我試着讀一些教程，但我仍然無法得到它的工作。

@edit： 服務類，如要求：

@Injectable() 
export class TipoDadoServiceProxy { 
    private http: Http; 
    private baseUrl: string; 
    protected jsonParseReviver: (key: string, value: any) => any = undefined; 

    constructor(@Inject(Http) http: Http, @Optional() @Inject(API_BASE_URL) baseUrl?: string) { 
     this.http = http; 
     this.baseUrl = baseUrl ? baseUrl : ""; 
    } 
    /* Whole bunch of other functions here... */ 

    /** 
    * @return Success 
    */ 
    getAllTipos(): Observable<string[]> { 
     let url_ = this.baseUrl + "/api/services/app/TipoDado/GetAllTipos"; 
     url_ = url_.replace(/[?&]$/, ""); 

     const content_ = ""; 

     let options_ = { 
      body: content_, 
      method: "get", 
      headers: new Headers({ 
       "Content-Type": "application/json; charset=UTF-8", 
       "Accept": "application/json; charset=UTF-8" 
      }) 
     }; 

     return this.http.request(url_, options_).flatMap((response_) => { 
      return this.processGetAllTipos(response_); 
     }).catch((response_: any) => { 
      if (response_ instanceof Response) { 
       try { 
        return this.processGetAllTipos(response_); 
       } catch (e) { 
        return <Observable<string[]>><any>Observable.throw(e); 
       } 
      } else 
       return <Observable<string[]>><any>Observable.throw(response_); 
     }); 
    } 

    protected processGetAllTipos(response: Response): Observable<string[]> { 
     const status = response.status; 

     if (status === 200) { 
      const responseText = response.text(); 
      let result200: string[] = null; 
      let resultData200 = responseText === "" ? null : JSON.parse(responseText, this.jsonParseReviver); 
      if (resultData200 && resultData200.constructor === Array) { 
       result200 = []; 
       for (let item of resultData200) 
        result200.push(item); 
      } 
      return Observable.of(result200); 
     } else if (status !== 200 && status !== 204) { 
      const responseText = response.text(); 
      return throwException("An unexpected server error occurred.", status, responseText); 
     } 
     return Observable.of<string[]>(<any>null); 
    } 


} 

Answer 1

嘗試

爲HTML

<div class="col-xs-6" *ngIf="(tipoDadoService.getAllTipos | async) && tipoDadoService.getAllTipos.getValue().length"> 
    <custom-select-combo [items]="_tipoDadoService.getAllTipos.getValue()"></custom-select-combo> 
</div> 

的組件

constructor( 
    public tipoDadoService: TipoDadoServiceProxy, 
) { 
}