MudBlazor MudChipSet — Как программно установить выбранный MudChip?
Я использую пару MudBlazors MudChip в наборе MudChipSet. Точная сумма варьируется в зависимости от длины списка (создание MudChip для каждого объекта в этом списке).
Теперь я хочу выбрать один из этих чипов на основе сохраненных данных. Мой подход заключался в создании списка MudChips, по одному на каждый элемент списка (только установка свойства «Текст»). Затем я фильтрую, чтобы получить тот, где «Текст» соответствует имеющейся у меня строке, и устанавливаю этот результат в переменную привязки «selectedChip».
Однако это не работает. Есть идеи, почему?
Посмотреть демо можно здесь: try.mudblazor.com/snippet/wOweEzaxfXjVrtFe
Ответы 1
Две вещи:
- Вам следует пытаться установить элемент не при инициализации, а после того, как компонент отрисован.
ChipSetимеет шанс стать нулевым, когдаOnInitializedвыполняется. - Вы создаете совершенно новый список фишек вместо того, чтобы использовать фишки, отображаемые вашим циклом
ChipSetforeach.
Изменения:
// Run this on first render to pre-set the selected chip
protected override void OnAfterRender(bool firstRender)
{
if (!firstRender) return; //exit if not first render
selectedChip = availableChips.Single(e => e.Text == SelectedLocation);
StateHasChanged();
}
Добавьте ссылку на рендерируемые чипы.
@foreach (var entry in GetWorkLocationHoursMock())
{
<MudChip @ref=ChipRef Text = "@entry.Location" Color = "Color.Primary"/>
}
и добавьте эти элементы в свой список вместо создания новых MudChip объектов.
private MudChip ChipRef { set => availableChips.Add(value); }
Конечный результат должен выглядеть вот так
Привязка включена selectedChip, а не selectedLocation, поэтому ваш метод должен ее обновлять. try.mudblazor.com/snippet/GkQeaJkxKCFDBCfT
Если вы хотите использовать SelectedLocation, поэтому вам нужно работать только со строками, вы можете сделать что-то вроде try.mudblazor.com/snippet/QaGoazEHqszKHytp
Большое спасибо за вашу постоянную помощь, второй вариант сработал отлично! На всякий случай, если кто-нибудь еще столкнется с этим: я вынес обновление selectedChip в отдельную функцию, так как мне приходилось обрабатывать различные крайние случаи, но я хотел, чтобы код оставался читаемым.
Большое спасибо за быструю помощь! Это действительно работает, но не будет работать, если источник данных (в данном случае переменная «SelectedLocation») изменится — как в этом примере: try.mudblazor.com/snippet/cYQyEpEnqAyAJBDn Я предполагаю, что это должно отражать это потому, что он использует двустороннюю привязку, верно?