如何分别更新同一剃刀组件的副本？

Question

我在一个页面上添加了几个相同的组件。当我更新任何组件时，视图不反映该组件的更改如果我更新第一个组件，所有其他组件都会反映相同的更改。我还有一个标签来指示变化的值。 Label 指示每个组件的不同值，但视图仅指示对第一个组件所做的更改，并反映到所有其他组件。有人能指出我的问题，并提供一个如何纠正它的例子吗？我已经尝试了 java 脚本的不同变体（可能不正确）但是我认为我不应该需要任何啤酒，因为它确实没有按预期工作。提前谢谢你。

在这里您可以看到更新已应用，但仅使用来自第一个（微小）组件的信息

主页

@page "/"

<h1>Hello, world!</h1>

<div class="row">
    <div class="col-md-4">
        <div style="height: 50px; width: 100px; margin:200px">
            <TestComponent ID="Test1" Offset2="@MyOffset1"/>
        </div>
        <div>
            <TestComponent ID="Test2" Offset2="@MyOffset2"/>
        </div>
    </div>
    <div class="col-md-4">
        <div style="margin: 50px">
            <TestComponent ID="Test3" Offset2="@MyOffset3"/>
        </div>
        <div style="margin: 200px">
            <TestComponent ID="Test4" Offset2="@MyOffset4"/>
        </div>
    </div>
</div>

@code{

    [Inject]
    public ComponentTimer T { get; set; }
    public double MyOffset1 { get; set; }
    public double MyOffset2 { get; set; }
    public double MyOffset3 { get; set; }
    public double MyOffset4 { get; set; }
    private const double _timeInterval = 3000;

    protected override async Task OnInitializedAsync()
    {
        await StartTimer();
    }

    private Task StartTimer()
    {
        T.SetTimer(_timeInterval, true);
        T.Onelapsed +=
            async delegate
            {
                await StartAsync();
            };
        return Task.CompletedTask;
    }

    private async Task StartAsync()
    {
        Random rand = new Random();
        for (int r = 1; r < 5; r++)
        {
            double ra = rand.NextDouble();
            switch (r)
            {
                case 1:
                    MyOffset1 = ra;
                    break;
                case 2:
                    MyOffset2 = ra;
                    break;
                case 3:
                    MyOffset3 = ra;
                    break;
                case 4:
                    MyOffset4 = ra;
                    break;
            }
            if (r >= 4)
            {
                StateHasChanged();
                await Task.Delay(1000);
            }
        }
    }
}

和组件

<h3>TestComponent</h3>
<label style="color: red; font-size: 50px">@Offset2</label>
<svg width="auto" height="auto" viewBox="0 0 800 600">
    <defs>
        <linearGradient id="dialColorScale">
            <stop style="stop-color:#ff0000;stop-opacity:1"
                  offset="0"
                  id="stop1" />
            <stop style="stop-color:#ff0000;stop-opacity:1"
                  offset="@Offset2"
                  id="stop2" />
            <stop style="stop-color:#ff6600;stop-opacity:1"
                  offset="0.53708327"
                  id="stop3" />
            <stop style="stop-color:#ffff00;stop-opacity:1"
                  offset="0.62770826"
                  id="stop4" />
            <stop style="stop-color:#ffff00;stop-opacity:1"
                  offset="0.80468744"
                  id="stop5" />
            <stop style="stop-color:#00ff00;stop-opacity:1"
                  offset="1"
                  id="stop6" />
        </linearGradient>
    </defs>
    <g class="GaugeColorScale">
        <path id="path6115"
              fill="url(#dialColorScale)"
              d="m 400.00009,256.2508 a 299.44714,296.14774 0 0 0 -299.44726,296.14844 299.44714,296.14774 0 0 0 0.0937,2.7461 h 74.83593 a 224.58543,222.11078 0 0 1 -0.0684,-1.92188 224.58543,222.11078 0 0 1 2.28711,-31.60937 224.58543,222.11078 0 0 1 6.81055,-30.9668 224.58543,222.11078 0 0 1 11.19726,-29.69141 224.58543,222.11078 0 0 1 15.35743,-27.81445 224.58543,222.11078 0 0 1 19.20312,-25.36914 224.58543,222.11078 0 0 1 22.6582,-22.4082 224.58543,222.11078 0 0 1 25.65235,-18.99219 224.58543,222.11078 0 0 1 28.125,-15.1875 224.58543,222.11078 0 0 1 30.02148,-11.07422 224.58543,222.11078 0 0 1 31.3125,-6.73633 224.58543,222.11078 0 0 1 31.96094,-2.26172 224.58543,222.11078 0 0 1 11.375,0.28516 224.58543,222.11078 0 0 1 11.3457,0.85547 224.58543,222.11078 0 0 1 11.28907,1.42187 224.58543,222.11078 0 0 1 11.19921,1.98438 224.58543,222.11078 0 0 1 11.08399,2.54492 224.58543,222.11078 0 0 1 10.93945,3.0957 224.58543,222.11078 0 0 1 10.76758,3.63867 224.58543,222.11078 0 0 1 10.56641,4.17579 224.58543,222.11078 0 0 1 10.33984,4.69726 224.58543,222.11078 0 0 1 10.08594,5.21094 224.58543,222.11078 0 0 1 9.80664,5.70898 224.58543,222.11078 0 0 1 9.5,6.19141 224.58543,222.11078 0 0 1 9.17186,6.66211 224.58543,222.11078 0 0 1 8.81836,7.11133 224.58543,222.11078 0 0 1 8.44336,7.54297 224.58543,222.11078 0 0 1 8.04689,7.95703 224.58543,222.11078 0 0 1 7.62694,8.35156 224.58543,222.11078 0 0 1 7.19142,8.7207 224.58543,222.11078 0 0 1 6.73436,9.07031 224.58543,222.11078 0 0 1 6.26172,9.39649 224.58543,222.11078 0 0 1 5.77148,9.69727 224.58543,222.11078 0 0 1 5.26955,9.9746 224.58543,222.11078 0 0 1 4.75,10.22657 224.58543,222.11078 0 0 1 4.22069,10.45117 224.58543,222.11078 0 0 1 3.6797,10.64844 224.58543,222.11078 0 0 1 3.13086,10.81836 224.58543,222.11078 0 0 1 2.57225,10.96289 224.58543,222.11078 0 0 1 2.00781,11.07617 224.58543,222.11078 0 0 1 1.4375,11.16211 224.58543,222.11078 0 0 1 0.86329,11.22265 224.58543,222.11078 0 0 1 0.28906,11.24805 224.58543,222.11078 0 0 1 -0.0684,1.92188 h 74.83594 a 299.44714,296.14774 0 0 0 0.0937,-2.7461 A 299.44714,296.14774 0 0 0 399.9999,256.2508 Z" />

    </g>
</svg>

@code {
    [Parameter]
    public string ID { get; set; }
    [Parameter]
    public double Offset2 { get; set; }
}

Answer 1

您的组件在 <linearGradient id="dialColorScale">

中使用 HTML id

就浏览器而言，您有 4 个具有相同 #id 的元素。最后一个获胜。

幸运的是你也有自己的身份证，所以做吧：

<linearGradient id="@("dialColorScale"+ID)" >

和

fill="url(#@("dialColorScale"+ID))"

如何分别更新同一剃刀组件的副本？

How can I update copies of the same razor component separately?

c#

svg

blazor

blazor-webassembly