Установка значения и выбранного атрибута для тега параметров - PullRequest
0 голосов
/ 11 октября 2018

Попытка обернуть голову вокруг вопроса установки значения и выбранного атрибута для тега параметров.Оба отлично работают независимо на теге, но ни один не работает, если присутствует другой.

Пример:

<select>
    <option *ngFor="let item of items" selected [ngValue]="item">
       {{item.value}}
    </option>
 </select>

В этом примере тег «выбранный» будет проигнорирован, и будет установлено только значение.Если я удалю [ngValue], выбранный атрибут будет применен к элементу.

Как я могу решить эту проблему, позволяя мне выделить выбранный параметр и присвоить ему значение?

Использование Angular 6 & Typescript

Ответы [ 3 ]

0 голосов
/ 11 октября 2018

Судя по предоставленному вами ограниченному описанию, элементы являются массивом объектов.Попробуйте присвоить фактическое значение [ngValue], например [ngValue] = item.value.Основываясь на вашем коде, кажется, что вы пытаетесь присвоить объект [ngValue], что может запутать шаблон для анализа выбранного значения.

0 голосов
/ 11 октября 2018

Указав selected, как у вас, каждый <option> выбирается, и с этого момента наступает хаос.Мне неясно, исходя из того, что вы выбираете, поэтому для моего решения я ожидаю локальную переменную со значением выбранного <option>:

selectedItem = "Three";

Затем привяжите к выражениюоценивая это:

<option *ngFor="let item of items" [selected]="selectedItem == item.value" [ngValue]="item.value" >
   {{item.value}}
</option>

Full StackBlitz здесь: https://stackblitz.com/edit/angular-c6cxkf

0 голосов
/ 11 октября 2018

Вы должны создать функцию, которая принимает этот item как параметр и возвращает логическое значение - isSelected(item), например.И результат этой функции будет указывать, должно ли selected быть истинным или ложным.
И value вы можете назначить так же, как вы показываете это так [value]="item.value."

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...