考慮以下代碼：
在 MyPage.razor 中：
<ul>
@foreach (var item in myList)
{
var theBool = false;
<li>
<span>For @item, theBool is @theBool</span>
(<a href="" @onclick="@(e => theBool = !theBool)">Reverse bool for @item</a>)
</li>
}
</ul>
@code {
List<string> myList = new() { "item1", "item2", "item3", "item4", "item5", };
}
...產生以下輸出：
我希望單擊鏈接會切換前面的 bool 值，因此它顯示“True”而不是“False”。它根本不起作用，變數似乎已更改，但UI (the <span>) 未重繪 。在 Blazor Webassembly 中實作這一點的好方法是什么？
（我希望不要被迫使用該@code部分：就可維護性而言，這將是主要的代碼開銷）。
更新 1
這就是我想要實作的目標：單擊鏈接（位于組件外部）必須更改組件的引數（以更改組件行為）：
<ul>
@foreach (var item in myList)
{
var theBool = false;
<li>
<a href="" @onclick="@(e => theBool = !theBool)">Show/Hide details</a>
<MyCoolComponent DisplayDetails="@theBool"></MyCoolComponent>
</li>
}
</ul>
uj5u.com熱心網友回復：
您的代碼將永遠不會在回圈的每次迭代中作業，因為區域變數 theBool 被設定為 false；那就是你看不到 UI 上的變化......
你可以這樣解決：
<ul>
@foreach (var item in Items)
{
<li>
<span>For @item.Name, item.IsSelected is @item.IsSelected</span>
(<a href="" @onclick="@(e => { item.IsSelected = !item.IsSelected; })">Reverse bool for @item.Name</a>)
</li>
}
</ul>
@code {
private List<Item> Items = Enumerable.Range(1, 5).Select(i => new Item { Name = $"item{i}" }).ToList();
public class Item
{
public string Name { get; set; }
public bool IsSelected { get; set; }
}
}
復制并測驗...
uj5u.com熱心網友回復：
不是答案，我會盡快洗掉它：
由于 theBool 被 lambda 捕獲，我預計它在 le 回圈之后仍然存在。
那是真實的...
@PanagiotisKanavos：你的意思是 Blazor 只訂閱欄位而不是變數的 Ui 重繪 ？
每次單擊錨元素時，框架都會自動呼叫 StateHasChanged 方法，并重新渲染 UI，但您看不到它的變化，就像在回圈開始時一樣，var theBool = false;
因此，<span>For @item, theBool is @theBool</span>重新渲染為：
<span>For item2, theBool is false</span>
如果您點擊了第二個專案。
uj5u.com熱心網友回復：
每次迭代都會丟失布林值。使用字典而不是串列將值存盤在一起。
鍵是字串，值是布林值：
<ul>
@foreach (var item in myList)
{
<li>
<span>For @item.Key, theBool is @item.Value</span>
(<a href="" @onclick="@(() => myList[item.Key] = !myList[item.Key])">
Reverse bool for @item.Key
</a>)
</li>
}
</ul>
@code {
Dictionary<string, bool> myList = new()
{
{"item1", false},
{"item2", false},
{"item3", false},
{"item4", false},
{"item5", false}
};
}
當您通過單擊更新布林值時，該值將與其鍵一起存盤。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/341581.html
上一篇：我在Android上的音頻播放器不作業-Xamarin
下一篇：回傳的引數格式不正確