DataList в Angular
У меня есть <datalist> и <select>:
Обновлено:
Пример 1:
<input type = "text" list = "codes" [(ngModel)] = "codeValue" (change) = "saveCode(codeValue)">
<datalist id = "codes">
<option *ngFor = "let c of codeList" [value] = "c.code" >{{c.name}}</option>
</datalist>
<select type = "text" list = "codes" [(ngModel)] = "codeValue1" (change) = "saveCode(codeValue)">
<option *ngFor = "let c of codeList" [value] = "c.code" >{{c.name}}</option>
</select>
codeList Массив в component.ts
codeList = [
{ code: 'abcdhe568dhjkldn', name: 'item1' },
{ code: 'ksdkcs7238t8cds', name: 'item2' },
{ code: 'kascggibebbi', name: 'item3' }
];
DataList показывает как имя (c.name), так и значение (c.code) в параметрах и сохраняет все, что присутствует в значении, тогда как select показывает имя (c.name) и сохраняет значение (c.code).
Поведение даталиста
Поведение select
Пример 2:
<datalist id = "codes">
<option *ngFor = "let i of [1,2,3,4]" [value] = "i">{{i-1}}</option>
</datalist>
{{a}}
Я хочу показать значение i-1 в поле предложений, но привязать переменную 'a' к i.
Существующее решение в HTML
Из этого сообщения Показать метки списка данных, но представить фактическое значение я вижу, что мы можем использовать "значение-данные" для достичь функциональности в HTML. Как я могу добиться такой же функциональности в Угловой.
Пожалуйста помоги!
Заранее спасибо.
Привет @Dino, я обновил вопрос другим примером для четкого описания проблемы.
Ответы 3
Попробуйте так.
<option *ngFor = "let i of [1,2,3,4]" (change) = "a=i" [value] = "i">{{i-1}}</option>
Привет, @DiabolicWords, я прикрепил скриншот проблемы. Проблема в том, что при отображении я получаю и значение, и имя. В моем случае я просто хочу отобразить имя (i-1), а не фактическое значение (i). Значение должно быть привязано к переменной 'a', тогда как имя должно отображаться в поле предложения.
Что ж, пусть кто-нибудь поправит меня, если я не говорю правду, но вы не можете привязать [значение] к 'a', потому что тогда каждый элемент option имеет одинаковое значение 'a'.
Чтобы достичь того, чего вы хотите, вы должны создать массив объектов, содержащих оба поля, «a» и «i». Затем вы можете показать «i» и привязать свое значение через ngModel к «a».
например
в вашем компоненте
export class AI {
constructor(
a: number,
i: number
) {}
}
aiList: Array<AI> = [];
ai: AI = new AI(1,0);
aiList.push(ai);
ai = new AI(2,1);
aiList.push(ai);
ai = new AI(3,2);
aiList.push(ai);
ai: = new AI(4,3);
aiList.push(ai);
в вашем шаблоне
<option *ngFor = "let ai of aiList" (change) = "a=ai.a" [(ngModel)] = "ai.a">{{ai.i}}</option>
Попробуйте вот так ....
html файл
<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>
ts файл
codeList = [
{ code: 'abcdhe568dhjkldn', name: 'item1' },
{ code: 'ksdkcs7238t8cds', name: 'item2' },
{ code: 'kascggibebbi', name: 'item3' }
];
public saveCode(e): void {
let name = e.target.value;
let list = this.codeList.filter(x => x.name === name)[0];
console.info(list.id);
}
Обновлено: Неважно, сначала я не понял вопроса