Blazor «@ref» относится к последнему элементу в команде цикла - PullRequest
Новая
       53

Blazor «@ref» относится к последнему элементу в команде цикла

0 голосов
/ 23 сентября 2019

«@ref» относится к текущему элементу, который является правильным.

«@ ref» относится к последнему элементу в команде цикла, который является неправильным (в моем примере, последний элемент tr изэлемент таблицы).

Я хочу, чтобы «@ref» относился к каждому элементу индивидуально (в моем примере к элементу tr элемента таблицы), а не к последнему элементу. 

@inject IJSRuntime JsRuntime;

<table class="table">
    <tbody>
        @foreach (var item in Items)
        {
            <tr @ref="@row" @onclick="() => {Rowclick(row);}">
                <td>@item</td>
            </tr>
        }
    </tbody>
</table>

@code
{
    public string[] Items = new string[] { "Tomas", "Jack", "Michael" };

    public async void Rowclick(ElementReference row)
    {
        await JsRuntime.InvokeAsync<object>("updateBackgroundColor", row);
    }
}

//--------------------------

<script type="text/javascript">
    function updateBackgroundColor(row) {
        row.bgColor = 'red';
    }
</script>

Ответы [ 2 ]

1 голос
/ 24 сентября 2019

Это ваш ответ: 

    @using Microsoft.AspNetCore.Components;
    @inject IJSRuntime JsRuntime;

    <table class="table">
    <tbody>
        @foreach (var item in Items)
        {
            <tr @ref:suppressField @ref="@item.Row" @onclick="@(() => {ClickForTestRow(item.Row);})">
                <td>@item.Name</td>
            </tr>
        }
    </tbody>
    </table>


@code {
[Parameter]
public IList<MyModel> Items { get; set; }

public async void ClickForTestRow(ElementReference row)
{
    await JsRuntime.InvokeAsync<object>("updateBackgroundColor", row, "red");
}

public class MyModel
{
    public ElementReference Row { get; set; }

    public string Name { get; set; }
}
}

// ---------------- 

<script type="text/javascript">
    function updateBackgroundColor(row) {
        row.bgColor = 'red';
    }
</script>
1 голос
/ 23 сентября 2019

Попробуйте что-нибудь подобное.Я не опробовал JS часть. 

@for (int i = 0; i < Items.Length; i++)
{
    <p @ref="Refs[i]">@Items[i]</p>
}

@code {
    public string[] Items = new string[] { "Tomas", "Jack", "Michael" };
    ElementReference[] Refs = new ElementReference[4];
}
...