Angular で ngFor を使用して一覧表示してみました。

新しいことをすると、いちいちはまります。本当にちょっとしたことなのですが、融通を利いてくれません。融通を利き出しても恐いのですが、もうすぐそういう時代がやって来たりするのでしょうか。
あれっ、プログラムを勉強することに意味があるのかと、少し疑問が沸いてしまいました。なんだろう、変な気持ち。

深く考えずに先に進みます。

１．プログラムを更新します。

１ー１．main.component.ts のテンプレートのタグを更新します。

import { Component } from '@angular/core';
+ import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent } from './header/header.component';
import { MainComponent } from './main/main.component';
import { Encyclopedia } from './encyclopedia';

@Component({
  selector: 'app-root',
  standalone: true,
-  imports: [RouterOutlet, HeaderComponent, MainComponent],
+   imports: [RouterOutlet, HeaderComponent, MainComponent, CommonModule],
  template: `
  <main>
    <app-header></app-header>
-    <app-main [encyclopedia]="encyclopedia"></app-main>
+    <app-main
+      *ngFor="let encyclopedia of encyclopediaList"
+      [encyclopedia]="encyclopedia">
+    </app-main>
  </main>
`
})
export class AppComponent {
-  encyclopedia: Encyclopedia = {
-    id: 999,
-    name: 'Test Name',
-  };
+  encyclopediaList: Encyclopedia[] = [
+    {
+      id: 1,
+      name: 'Test Name 001'
+    },
+    {
+      id: 2,
+      name: 'Test Name 002'
+    }
+  ];
}

（アウトプット）

※※※　学習したこと　※※※
・ngFor を使用するには、CommonModule のインポートが必要です。
2行目：import { CommonModule } from '@angular/common';
12行目：imports: [RouterOutlet, HeaderComponent, MainComponent, CommonModule],

・データを配列にする場合は、[] で囲む必要があります。
29行目：encyclopediaList: Encyclopedia[] = [
38行目：];

今日は、配列で {} が [] に変えるところを見逃し、苦労しました。
なんとか無事に思った通りになりました。