值不顯示材質2自動完成

我想獲得自動完成顯示對象的一個參數，但保存另一個，迄今它似乎並沒有表現。值不顯示材質2自動完成

代碼是按材料2自動完成網站：Autocomplete

不同的是，[值]我要救「option.Id」而不是「選項」。

錯誤是當它記錄選項時，它實際上並沒有在輸入字段中顯示該值（使其保留空白）。

我-comp.html

<md-input-container> 
    <input type="text" mdInput [formControl]="myControl" [mdAutocomplete]="auto"> 
</md-input-container> 

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn"> 
    <md-option *ngFor="let option of filteredOptions | async" [value]="option.Id"> 
     {{ option.name }} 
    </md-option> 
</md-autocomplete>

我-comp.ts

class MyComp implements OnInit { 
    myControl = new FormControl(); 
    options = [ 
    new User('Mary', 1), 
    new User('Shelley', 2), 
    new User('Igor', 3) 
    ]; 
    filteredOptions: Observable<User[]>; 

    ngOnInit() { 
     this.filteredOptions = this.myControl.valueChanges 
     .startWith(null) 
     .map(user => user && typeof user === 'object' ? user.name : user) 
     .map(name => name ? this.filter(name) : this.options.slice()); 
    } 

    filter(name: string): User[] { 
     return this.options.filter(option => new RegExp(`^${name}`, 'gi').test(option.name)); 
    } 

    displayFn(user: User): string { 
     return user ? user.name : user; 
    } 
} 

class User { 
name: string; 
id: number; 

constructor(name: string, id: number) 
this.name = name; 
this.id = id; 
}

來源

2017-05-19 Aeseir

嘗試'[ngValue]' – SrAxi

可能導致問題的一件小事。在ngfor循環中使用'id'而不是'id'。 –

ngValue拋出模板解析錯誤，因爲它不是md-options的一部分。 Id正在被正確設置，值不被顯示。 – Aeseir

先給自動完成的模型（例如：基於myModel）：

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn" [(ngModel)]="myModel"> 
    <md-option *ngFor="let option of filteredOptions | async" [ngValue]="option.Id"> 
     {{ option.name }} 
    </md-option> 
</md-autocomplete>

這裏，[ngValue]給出myModel的值option.Id。

當你檢索模型myModel你會得到option.Id。

如果需要，您可以將(ngModelChange)="onChange($event)"添加到您的<md-autocomplete>以幫助您自己操作組件中的數據。

來源

2017-05-19 13:20:42 SrAxi

ngValue拋出模板解析錯誤，因爲它不是md-options的一部分 – Aeseir

問題是在displayFn函數中，期望將User對象作爲參數，但是您傳遞的是user.id，它是一個數字，並且由於不匹配，不會將值傳遞給視圖。

我有一個在Plunker工作exmaple。

displayFn(userId: number) { 
     return userId; 
    }

來源

2017-05-22 15:46:22 Nehal

你可以從options通過使用md-autocompletedisplayWith基於user.id被綁定到md-option，在這裏你需要使用bind(this)，以便訪問組件的數據發現user.name過濾。

<md-autocomplete #auto="mdAutocomplete" [displayWith]="displayFn.bind(this)">

，並在displayFn功能做過濾

displayFn(id: number): string { 
    if (!id) return ''; 
    let index = this.options.findIndex(option => option.id === id); 

    return index === -1 ? '' : this.options[index].name; 
}

參考plunker demo。

評論：在您的模板中，您正在使用Id，但在您的User類中它是id。我認爲這也可能會導致空白，如果您更正此錯字，user.id將被設置爲md-input。

來源

2017-05-29 06:02:24 Pengyy

我正嘗試使用json文件，然後在讀取json文件'displayFn'方法執行之前。我怎樣才能實現從動態傳遞的價值 – Vignesh

值不顯示材質2自動完成

回答

相關問題