0
私は非同期にデータをロードし、パラメータとして渡すカスタム選択コンポーネントを作成しようとしています。これは私のコンポーネントです:パラメータとして非同期データをコンポーネントに渡す
@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);
}
}
@AllenWahlberg済コンポーネントのためにそれが
HTML
のためにしてみてください –