블레이저에 동적 구성 요소 목록 추가

asp.net-core blazor c#

문제

방금 blazor (v0.3)을보고 시작했고 blazor를 사용하여 목록을 추가하려고하는 테스트를 시작했습니다.

먼저 동일한 페이지에서 간단한 목록을 테스트하기 위해 List<string> 을 만들었습니다.

<ul>
    @foreach (var item in listItems)
    {
        <li>@item</li>
    }
</ul>


@functions {

    private List<string> listItems = new List<string>();
    private string newItem;

    private void AddItem()
    {
        if (string.IsNullOrEmpty(newItem))
            return;

        listItems.Add(newItem);
        newItem = "";
    }

}

이것은 잘 작동하고, 추가 할 때 모든 요소를 ​​목록에 추가합니다. 하지만 그때, 내가 구성 요소를 추가하려고 하나의 구성 요소를 추가하는 것은 쉽습니다,이 질문에 따라 여기에 있지만 목록에 대한 다음 문제가 있었다 :

  • 구성 요소의 기능을 테스트하기 위해 <li> 구성 요소를 만들었습니다. 구성 요소보기는 다음과 같습니다.
<ul>
    @foreach (var item in listItems)
    {
        <li>@item</li>
    }
</ul>


@functions {

    private List<string> listItems = new List<string>();
    private string newItem;

    private void AddItem()
    {
        if (string.IsNullOrEmpty(newItem))
            return;

        listItems.Add(newItem);
        newItem = "";
    }

}
  • 부모보기에서
<ul>
    @foreach (var item in listItems)
    {
        <li>@item</li>
    }
</ul>


@functions {

    private List<string> listItems = new List<string>();
    private string newItem;

    private void AddItem()
    {
        if (string.IsNullOrEmpty(newItem))
            return;

        listItems.Add(newItem);
        newItem = "";
    }

}
<ul>
    @foreach (var item in listItems)
    {
        <li>@item</li>
    }
</ul>


@functions {

    private List<string> listItems = new List<string>();
    private string newItem;

    private void AddItem()
    {
        if (string.IsNullOrEmpty(newItem))
            return;

        listItems.Add(newItem);
        newItem = "";
    }

}

fist 요소를로드하면 올바르게로드됩니다. 여기에 이미지 설명을 입력하십시오.

그러나 두 번째 칸에 들어 왔을 때 모든 칸이 마지막 칸으로 대체됩니다.

여기에 이미지 설명을 입력하십시오.

어떤 아이디어가 계속되고 있니?

인기 답변

이것은 TxtExample 이 구성 요소에 대해 전역 TxtExample 때문입니다. Blazor가 잠재적 인 UI 변경을 감지하면 모든 구성 요소를 다시 계산하고 차이점을 통해 DOM을 업데이트합니다. 따라서 텍스트 상자를 변경하면 TxtExample 이 업데이트 된 다음 Razor가 다시 계산되어 모든 행에 대해 TxtExample 의 새 값이 삽입됩니다.




아래 라이선스: CC-BY-SA with attribution
와 제휴하지 않음 Stack Overflow
이 KB는 합법적입니까? 예, 이유를 알아보십시오.
아래 라이선스: CC-BY-SA with attribution
와 제휴하지 않음 Stack Overflow
이 KB는 합법적입니까? 예, 이유를 알아보십시오.