在Angle 5中使用ngx-bootstrap typeahead和模型值數組

Question

HTML模板

<tr *ngFor="let wi of page.items" (click)="selectWorkItem(wi)">
  <td><input [ngModel]="wi.checked" type="checkbox"></td>
  <td [textContent]="wi.someText"></td>
  <td>
     <input 
        class="form-control"
        tabindex="-1"
        [typeahead]="WHAT THE ?" <!-- tried propertyManagers below -->
        [ngModel]="wi.propertyManager" />

零件

export class WorkItemListComponent implements OnInit {

    selectedPropertyManager: any;
    propertyManagers = Observable.create((observer: any) => {
        observer.next(this.selectedPropertyManager);
    }).mergeMap((token: string) => 
         this.partyService.loadPartyHints(token).map(_ => _.displayName));

page.items包含與表中的每一行相對應的項目列表。 我正在觀察的是，就我而言， observer.next是要綁定到page.items[?].propertyManager的[ngModel] ，但是observable實際上是綁定到selectedPropertyManager （與[ngModel] ）。

有什么方法可以創建一個觀察當前模型值的預輸入，並將其傳遞給loadPartyHints函數。

<input 
    class="form-control"
    tabindex="-1"
    [typeahead]="CREATE_OBSERVABLE_OVER_MODEL(wi.propertyManager)"
    [ngModel]="wi.propertyManger" 
    <!-- THIS is the model value, not selectedPropertyManager -->

編輯

我已經嘗試過了...

有了這樣的模板...

<input 
   #inp
   class="form-control"
   tabindex="-1"
   [typeahead]="propertyManagers"
   [(ngModel)]="wi.propertyManager"
   (ngModelChange)="valueChanged(inp.value)"/>

及以下Subject

hints = new Subject();
propertyManagers = this.hints.mergeMap((token: string) => this.partyService.loadPartyHints(token).map(_ => _.map(x => x.displayName)));

valueChanged(value: string) {
    this.logger.info(`input changed :: ${value}`);
    this.hints.next(value);
}

這讓我更加接近，但是現在所有ngx-bootstrap都相互干擾並獲取彼此的數據。

我需要有人創建一個Subject / Observable工廠來獨立連接每一行嗎？

Answer 1

import { Component, Provider, forwardRef, Input, Output, EventEmitter } from "@angular/core";
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
import { NGXLogger } from "ngx-logger";
import { Subject } from "rxjs/Subject";

@Component({
    selector: "typeahead-input",
    template: `<input 
        #inp
        class="form-control"
        tabindex="-1"
        [typeahead]="observable"
        [(ngModel)]="value"
        (typeaheadOnSelect)="select($event)"
        (ngModelChange)="hintValueChanged(inp.value)"/>
    `,
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => TypeaheadInputComponent),
            multi: true
        }]
})
export class TypeaheadInputComponent implements ControlValueAccessor {
    private _value: any = "";
    hints = new Subject();
    observable = this.hints.mergeMap((token: string) => this.loadHints(token));
    @Input() hint: Function;
    @Output() itemSelected = new EventEmitter<string>();

    constructor(
        private readonly logger: NGXLogger) {
    }

    get value(): any { return this._value; };

    set value(v: any) {
        if (v !== this._value) {
            this._value = v;
            this.onChange(v);
        }
    }

    loadHints(token: string) {
        this.logger.info(`loading hints ${token}`);
        return this.hint(token);
    }

    hintValueChanged(hint: string) {
        this.logger.info(`typehead :: hint value (${hint})`);
        this.hints.next(hint);
    }

    select(selectedItem: any) {
        this.itemSelected.emit(selectedItem.value);
    }

    writeValue(value: any) {
        this._value = value;
        this.onChange(value);
    }

    onChange = (_) => { };
    onTouched = () => { };
    registerOnChange(fn: (_: any) => void): void { this.onChange = fn; }
    registerOnTouched(fn: () => void): void { this.onTouched = fn; }
}