【解決方法】ブレザーのireadonlylistからアイテムを編集して削除するには?

[ad_1]

ここに画像の詳細をアップロードした 2 つのリストがあります。

リスト 1- IReadOnlyList? ListFileToUpload = Array.Empty<ブラウザファイル>(); —バインド先—>
リスト 2- IReadOnlyList<画像>? imageListUI { 取得; 設定; } = Array.Empty<画像>(); —バインド先—>

純粋な画像/アップロードされたファイルのメタデータ用の 1 つのリストと、2 番目のリストにも同じものが含まれます
ユーザーが複数の画像を閲覧するたびに、最初のリストがアップロードされたファイルの詳細を取得し、2 番目のリストをトリガーします。
の最初のリストとの 2 番目のリストをバインドしています。との両方が別のコンポーネントにあります。
2番目のリストは、最初のリストが更新されたときに自動的に詳細を取得します。これまではできますが、次は、
から (2 番目のリストのみを使用) ファイル名を編集する必要があり、ファイル項目を削除する必要があります。
と。以下のコードパターンを使用して、この編集および2番目のリストからアイテム操作を削除する方法.以下は私のコード構造です

私が試したこと：

MainUI.razor-page

 <FileInput @bind-SelectedFiles="createimage.ListFileToUpload"/> //calling fileinput component by passing file details

//in below table i need to add inline edit and delete item functionality.that change should reflects in  <MudList>
 @if (createimage.imageList.Count > 0)
{
    
                <MudTable Items="createimage.imageListUI" Hover="true" Dense="true" Class="mb-4" Striped="true">
                <HeaderContent>
                    <MudTh>Filename</MudTh>
                    <MudTh>FileNameWithoutExtension</MudTh>
                </HeaderContent>
                <RowTemplate Context="mediaItem">
                        <MudTd DataLabel="Filename">@mediaItem.Name</MudTd>
                        <MudTd DataLabel="FileNameWithoutExtension">@mediaItem.ContentType</MudTd>
                    <MudTd DataLabel="Edit">
                    </MudTd>
                </RowTemplate>
            </MudTable>
  }      

@code{
   public partial class UI

    {
       private Createimage createimage = new();
     }
}


//initializing and get set to lists

public class Createimage{

        public IReadOnlyList<Images>? imageListUI { get; set; } = Array.Empty<Images>();

        private IReadOnlyList<BrowserFile>? _ListFileToUpload = Array.Empty<BrowserFile>();

        public IReadOnlyList<BrowserFile>? ListFileToUpload
        {

            get { return this._ListFileToUpload; }

            set
            {
                this._ListFileToUpload = value;
                imageListUI = value.Select(file => new Images(file)).ToList();

            }
        }
}


  public class Images
    {
        private BrowserFile file;

        public Images(BrowserFile file)
        {
            this.file = file;
            Name = file.FileName;
            ContentType = file.FileExtension;
        }
        public String Name { get; set; }
        public String ContentType { get; set; }
       
    }
}
		
		

public class BrowserFile 
{
    
    public BrowserFile(IBrowserFile file)
    {
        File = file ?? throw new ArgumentNullException(nameof(file));
        FileName = Path.GetFileName(File.Name);
    }

    
    public IBrowserFile File { get; }
	
}
	
	
	
	fileinputComponent.razor
	
	
	 <MudList>
                    @foreach (var fileInfo in SelectedFiles)
                    {
                        <MudListItem @key="@fileInfo.File">
                            <MudChip Color="Color.Dark"
                                     Style="overflow: hidden; width: 60px;"
                                     Text="@(fileInfo.FileExtension)"/>
                            @(fileInfo.FileNameWithoutExtension)
                        </MudListItem>
                    }
                </MudList>
	
	@code{
	[Parameter]
	public IReadOnlyList<BrowserFile> SelectedFiles { get; set; } = Array.Empty<BrowserFil>(); //getting selected files through component parameter

	private async Task OnFilesChanged(InputFileChangeEventArgs e)
    {
        
		 var files = new List<BrowserFile>(e.FileCount);
        files.AddRange(e.GetMultipleFiles(50).Select(file => new BrowserFilefile)));
		
    }
	}

解決策 1

を使用する理由 IReadOnlyList<T> ではない IList<T> また List<T>?

IReadOnlyList<T> リストの内容が変更されるのを防ぎます。そのため、アイテムを変更 (追加/削除) することはできません。アイテムで許可されている場合にのみ、コンテンツを変更してください。

アップデート

上記のように、アイテムを追加または削除することはできません IReadOnlyList<T>. リストを置き換える必要があります。

次に例を示します。

<pre>var items = new List<string>
{
    "one",
    "two",
    "three"
};

var test = new TestClass(items);
foreach (string item in test.ReadOnlyList)
{
    Console.WriteLine(item);
}
Console.WriteLine("-----");

var newItems = new List<string>(items);
newItems.Reverse();

test.SetReadonlyList(newItems);

foreach (string item in test.ReadOnlyList)
{
    Console.WriteLine(item);
}
Console.WriteLine("-----");

class TestClass
{
    public IReadOnlyList<string> ReadOnlyList { get; set; }

    public TestClass(List<string> items)
    {
        ReadOnlyList = items.ToList();
    }

    public void SetReadonlyList(List<string> items)
    {
        ReadOnlyList = items;
    }
}