Как сделать так, чтобы плачхолдер всегда был виден при выборе?

Question

У меня есть выбор в приложении Angular с некоторыми опциями. Я хотел бы иметь заполнитель на нем, и, кроме того, весь выбор должен быть отключен при определенных условиях.

Это мой код до сих пор:

<select class="form-control" id="food" [(ngModel)]="myFood" disabled="{{foodStatus === 'private'}}">
    <option value="" disabled="true" [selected]="true">Placeholder</option>
    <option value="1">Meat</option>
    <option value="2">Vegetarian</option>
    <option value="3">Vegan</option>
    <option value="4">Main dish</option>
</select>

На момент, тег disabled не будет работать. Это происходит, если я добавлю name к самому select. Но если я сделаю это, заполнитель не будет виден, а будет присутствовать только среди опций, когда я выберу один: похоже, что функциональность нарушает другой.

Что мне здесь не хватает?

Answer 1

Вы должны связать с отключенным атрибутом:

<select [attr.disabled]="foodStatus === 'private' ? 'disabled' : null">
</select>

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

Другая проблема заключается в том, что вы смешиваете Angular метафоры - [(ngModel)] определяет, какое значение выбрано.

См. Этот stackblitz для рабочего примера. Обратите внимание, как я удалил [selected] из первой опции.