Html 如何在HTNL ng模板中动态创建？（角度）

我想建立一个幻灯片组件。我使用了ng引导：旋转木马 ().
但现在的情况是，我创建的图像数量是预先确定的（通过HTML文件中的：

的数量）。
但是我想动态地构建它。
我试着使用

，但它对我不起作用。
如果您能与我分享您的解决方案想法，我将非常高兴。
我附加了非动态代码。谢谢

slideshow.comont.html

：

<ngb-carousel *ngIf="images">
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img [src]="images[0]" alt="Random first slide">
      </div>
      <div class="carousel-caption">
        <h3>"{{titles[0]}}"</h3>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </div>
    </ng-template>
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img [src]="images[1]" alt="Random second slide">
      </div>
      <div class="carousel-caption">
        <h3>"{{titles[1]}}"</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
    </ng-template>
    <ng-template ngbSlide>
      <div class="picsum-img-wrapper">
        <img [src]="images[2]" alt="Random third slide">
      </div>
      <div class="carousel-caption">
        <h3>"{{titles[2]}}"</h3>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </div>
    </ng-template>
  </ngb-carousel>

---

在ng模板中仅使用*ngFor，并给出不同的“id”

标题[i]
自由精英的生命，自由的法雷特拉·奥古斯·莫利斯

注意：您有两个单独的数组，因此，ngFor有一个

let i=index

并使用titles[i]作为标题，如果您创建一个对象数组而不是两个数组，则使用对象的属性

import { Component } from '@angular/core';
import { Input } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';
import { ActivatedRoute, Router } from '@angular/router';

export interface Pic {
  image: string;
  title: string;
}

@Component({
  selector: 'app-slideshow',
  templateUrl: './slideshow.component.html',
  styleUrls: ['./slideshow.component.css']
})

export class SlideshowComponent {
  private dbData;//will hold object from firebase
  @Input() dbPath: string;
  public images: Array<Pic> = [];
  public titles: Array<Pic> = [];

  constructor(private route: ActivatedRoute, private db: AngularFireDatabase, private router: Router) {}

 ngOnInit():void{
  this.dbData=this.db.list(this.dbPath).valueChanges()
  .subscribe(data => {
    console.log(data);

    for (let i = 0; i < data.length; i++) {
      this.images.push(data[i]["image"]);
      this.titles.push(data[i]["title"]);
    }
  })
 }
}

<ngb-carousel #myCarousel="ngbCarousel" >
  <ng-template ngbSlide *ngFor="let image of images;let i = index" id="{{i}}">
    <div class="picsum-img-wrapper">
       <img [src]="image" alt="Random first slide">
    </div>
    <div class="carousel-caption">
       <h3>titles[i]</h3>
       <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  <ng-template/>
</ngb-carousel>