Html 未显示新组件的视图

我有我的应用程序组件类，我想在其中添加新组件.然后，我将新组件的 Select 器添加到主类模板中.

 `import {CountryCapitalComponent} from "./app.country";
  @Component({
   selector: 'app-root',
   template: `
   <h2 class="counter">Title</h2>
 <section>
  <app-country-capital [data]="{ 'Germany': 'Berlin', 'Azerbaijan': 'Baku' }"></app-country-capital>
</section>
`,
standalone: true,
imports: [
CountryCapitalComponent
],
  styles: [`
.counter {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

`]
})
export class AppComponent {

` 我制作了另一个部件，看起来像这样

    @Component({
  selector: 'app-country-capital',
  template: `
    <div *ngFor="let pair of shuffledPairs">
                  {{ pair.display }}
      
    </div>
  `,
  standalone: true,
  imports: [
    NgStyle
  ],
  styles: []
})
export class CountryCapitalComponent implements OnInit {
  @Input() data: { [country: string]: string; } | string ="{ 'Germany': 'Berlin', 'Azerbaijan': 'Baku' }";

 initializePairs() {
let pairs: Pair[];
pairs = Object.entries(this.data).reduce((acc: Pair[], [country, capital]) => {
  return acc.concat(
    {display: country, correct: true, clicked: false},
    {display: capital, correct: false, clicked: false}
  );
}, []);

    // Shuffle the pairs
    this.shuffledPairs = this.shuffleArray(pairs);
  }
  shuffleArray(array: any[]) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  }

 
}

当我运行代码时，我没有获得CountryCapitalComponent的视图.HTMLElemt如下所示

<app-country-capital _ngcontent-ng-c1124832886="" ng-reflect-data="[object Object]"><!--container--></app-country-capital>

如何获取CountryCapitalComponent的视图.正如我所理解的，我正确地将属性数据绑定到子组件.我错过了什么.