<li class="top-bottom">
<div class="form-item">
<label for="funNumber">fun Number</label>
<input type="text" class="funNumber" id="funId" maxlength="6" formControlName="funId" list="funNumberList" />
<datalist id="funNumberList">
<option value="{{item.id}}" *ngFor="let item of funNumberList">{{item.friendlyName}}</option>
</datalist>
</div>
</li>
當用戶從資料串列中選擇一個專案時，輸入會更新為“值”。我希望輸入顯示item.friendlyName
看圖片。表明
10
AC-03
我想顯示AC-03而不是10
uj5u.com熱心網友回復：
<select name="names" id="myNames">
<option *ngFor="let user of users" value="name">{{ user.firstName }}</option>
</select>
我重新創建了一個快速隨機陣列，它對我來說作業得很好。
uj5u.com熱心網友回復：
public codeList = [
{ id: 1, name: 'Angular 2 ' },
{ id: 2, name: 'Angular 4' },
{ id: 3, name: 'Angular 5' },
{ id: 4, name: 'Angular 6' },
{ id: 5, name: 'Angular 7' },
{ id: 5, name: 'Angular 8' },
{ id: 5, name: 'Angular 9' },
{ id: 5, name: 'Angular 11' },
{ id: 5, name: 'Angular 12' },
];
public saveCode(e): void {
let find = this.codeList.find(x => x?.name === e.target.value);
console.log(find?.id);
}<input type="text" list="codes" [(ngModel)]="codeValue" (change)="saveCode($event)">
<datalist id="codes">
<option *ngFor="let c of codeList" [value]="c.name" >{{c.name}}</option>
</datalist>uj5u.com熱心網友回復：
如果friendlyName 是 unuqie
<li class="top-bottom">
<div class="form-item">
<label for="funNumber">fun Number</label>
<input type="text" class="funNumber" list="list" (change)="getId($event)" />
<datalist id="list">
<option #item value="{{ item.friendlyName }}" *ngFor="let item of list">
{{ item.id }}
</option>
</datalist>
</div>
list = [
{ id: 1, friendlyName: 'a' },
{ id: 2, friendlyName: 'b' },
{ id: 3, friendlyName: 'c' },
];
getId(ev: Event) {
const fn = (ev.target as HTMLInputElement)?.value;
console.log('name', fn);
const id = this.list.filter((item) => item.friendlyName == fn.toString())[0].id;
console.log('id',id);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/479145.html
上一篇：無法在輸入欄位中顯示值