Как вы отображаете список компонентов в al oop (Blazor)? - PullRequest
Новая
       5

Как вы отображаете список компонентов в al oop (Blazor)?

0 голосов
/ 07 апреля 2020

Я должен упустить что-то очень очевидное в Blazor ... Я хочу просто отобразить список, содержащий компонент, но нет (очевидного?) Способа ссылаться на итератор (который является компонентом) для визуализации?

TodoList.razor 

<input @bind="_newTodo" />
<button @onclick="@AddTodoItem">+</button>

@foreach (TodoItem todoItem in _todoItems)
{
    // todoItem is a razor component, yet I can't simply render it here?
    // <todoItem />
}

@code {
    private IList<TodoItem> _todoItems = new List<TodoItem>();
    private string _newTodo;

    private void AddTodoItem()
    {
        if (!string.IsNullOrWhiteSpace(_newTodo))
        {
            _todoItems.Add(new TodoItem { Title = _newTodo });
            _newTodo = string.Empty;
        }
    }
}

TodoItem.razor 

<span>@Title</span>

@code {
    public string Title { get; set; }
}

Ответы [ 2 ]

2 голосов
/ 08 апреля 2020

В React это очень просто сделать и работать так же, как вы только что сделали, но в Blazor я не думаю, что вы можете сделать это так, как пытаетесь.

Одним из решений для этого является класс, который содержит свойства компонента и передает ему свойства 

<input @bind="_newTodo" />
<button @onclick="@AddTodoItem">+</button>

@foreach (TodoItem todoItem in _todoItemsDto)
{
    // Pass the Dto properties to the component
    <TodoItem Title="@todoItem.Title" />
}

@code {
    private IList<TodoItemDto> _todoItemsDto = new List<TodoItemDto>();
    private string _newTodo;

    class TodoItemDto {
        public string Title { get; set; }
    }

    private void AddTodoItem()
    {
        if (!string.IsNullOrWhiteSpace(_newTodo))
        {
            _todoItems.Add(new TodoItemDto { Title = _newTodo });
            _newTodo = string.Empty;
        }
    }
}
0 голосов
/ 08 апреля 2020

Я только что создал справочную систему, в которой есть компонент LinkButton, и отображаю его так: 

 foreach (HelpCategory category in Categories)
 {
     <LinkButton Category=category Parent=this></LinkButton>
     <br />
 }

В каждой категории справки есть одна или несколько статей справки, которые можно развернуть.

Вот код для моего LinkButton, он делает то же самое: 

@using DataJuggler.UltimateHelper.Core
@using ObjectLibrary.BusinessObjects

@if (HasCategory)
{
    <button class="linkbutton" 
    @onclick="SelectCategory">@Category.Name</button>

    @if (Selected)
    {
        <div class="categorydetail">
            @Category.Description
        </div>
        <br />
        <div class="margintop">
            @if (ListHelper.HasOneOrMoreItems(Category.HelpArticles))
            {
                foreach (HelpArticle article in Category.HelpArticles)
                {
                    <ArticleViewer HelpArticle=article Parent=this> 
                    </ArticleViewer>
                    <br />
                    <div class="smallline"></div>
                }
            }
        </div>
    }
}
...