Как динамически создавать в HTNL ng-шаблон? (Angular) - PullRequest
Новая
       9

Как динамически создавать в HTNL ng-шаблон? (Angular)

0 голосов
/ 17 июня 2020

Я хочу создать компонент слайд-шоу. Я использовал ng- bootstrap: Carousel (https://ng-bootstrap.github.io/# / components / carousel / examples ).
Но сейчас ситуация такова, что количество создаваемых мной изображений предопределено (количеством: <ng-template ngbSlide> </ng-template ngbSlide>, которые находятся в файле HTML).
Но я бы хотел строить динамически.
Я пытался использовать <div * ngFor = "let dataImage of images">, но у меня это не сработало.
Я был бы очень рад, если бы вы могли поделиться со мной своими идеями решения.
Прилагаю нединамический код c. Спасибо !!!

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

1 Ответ

1 голос
/ 17 июня 2020

он использует только * ngFor в ng-шаблоне и дает разные "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 и использует заголовки [ i] для заголовка, если вы создаете массив объектов вместо двух массивов, используйте свойства объекта

...