html - 如何在 HTNL ng-template 中动态创建？（角度）

Question

我想构建一个幻灯片组件。我使用了 ng-bootstrap:Carousel ( https://ng-bootstrap.github.io/#/components/carousel/examples )。
但现在的情况是我创建的图像数量是预先确定的（由<ng-template ngbSlide> </ng-template ngbSlide>HTML 文件中的：数量决定）。
但我想动态构建它。
我尝试使用<div * ngFor = "let dataImage of images">，但它对我不起作用。
如果您能与我分享您的解决方案想法，我将非常高兴。
我附上了非动态代码。谢谢！！！

slideshow.comonent.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>

slideshow.comonent.ts：

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"]);
    }
  })
 }
}

标签： htmlangularfirebase

Answer 1

它只在 ng-template 中使用 *ngFor 并给出不同的“id”

<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>

注意：您有两个单独的数组，因此，ngFor 有一个let i=index并使用titles[i] 作为标题，如果您创建一个对象数组而不是两个数组，则使用对象的属性