コレクションを操作する

Blazor WebAssembly アプリケーションで コレクションのデータを使用します。 画面は Visual Studio で Blazor WebAssembly の プロジェクトを作成した Index.razor ファイルを 少し書き換えたコードです。 14 行目の ＠code 以降に people というリストが 宣言されています。 people は person 型のコレクションで name、age という２つの フィールドを持ちます。 name は string 型で age は Int 型です。 person のコードを 確認してみましょう。 このように２つのフィールドが プロパティとして設定されています。 この people を テーブルで表示しましょう。 ウェブサイトで 一覧をテーブルで表示する、 またはリストで表示するという ケースはよくあります。 ここで、テーブルの td タグ用の 文字列を生成するという手もありますが ここでは ＠foreach を使用しましょう。 ＠foreach では var、person、受け取る変数を 用意します。 in people こうすることによって people の内容を ひとつずつ取り出して person に代入します。 ＠foreach の中では、 Blazor 記法を用いた タグを利用することができます。 tr、td そして、＠person.Name そして、 person.Age このようにタグを用いて 値を埋め込んだ形式で 繰り返し処理を実行することが できます。 このコードを実行して 動作を確認してみましょう。 プログラムを実行すると、 テーブルにひとつひとつ取り出した値が ひとつひとつ取り出した値が 表示されていることがわかります。 再利用性を高めるために このテーブルの部分を 別のコンポーネントとして 作成しましょう。 ソリューションエクスプローラーの Shared フォルダーの欄で 右クリック、 そして、「追加」 「Razor コンポーネント」を選択します。 名前を入力します。 PeopleTable としましょう。 コンポーネントが作成できました。 Index.razor から テーブルの部分を切り取ります。 そのまま張り付けましょう。 この状態ではもちろん people…