如何使用 *ngFor 之外的索引访问数据

Question

我想访问 *ngFor 之外的数据

    <mat-carousel timings="250ms ease-in" [autoplay]="false" interval="5000" color="accent" maxWidth="93%"
                proportion="80" slides="3" slideHeight="100%" [loop]="false" [hideArrows]="false" [hideIndicators]="true"
                [useKeyboard]="false" [useMouseWheel]="false" orientation="ltr" maintainAspectRatio="false">
    <mat-carousel-slide #matCarouselSlide *ngFor="let event of myvideo; let i = index"
                  overlayColor="#00000040" [hideOverlay]="true">
                          <video *ngIf="event?.Video" controls style="width: 100%;">
                          <source src="{{event?.Video}}" type="video/mp4">
                          Browser not supported
                        </video>
    </mat-carousel-slide>

***I want to get in this part {{event?.title}}*** 
    </mat-carousel>

请问您有什么想法可以分享给我吗？可能吗？

Answer 1

@Site，我认为您正在寻找 ng-container - 不会创建额外的标签 -

<ng-container *ngFor="let event of myvideo; let i = index">
  <mat-carousel-slide #matCarouselSlide >...
  </mat-carousel-slide>
  {{event?.title}}
</mat-carousel>

但我真的认为“标题”应该在里面 mat-carousel-slide

Answer 2

通过source code - 您可以使用更改输出事件将当前幻灯片索引保存在组件中

    <mat-carousel ... (change)="currentSlideIndex = $event">
    <mat-carousel-slide #matCarouselSlide *ngFor="let event of myvideo; let i = index"
                  overlayColor="#00000040" [hideOverlay]="true">
                          <video *ngIf="event?.Video" controls style="width: 100%;">
                          <source src="{{event?.Video}}" type="video/mp4">
                          Browser not supported
                        </video>
    </mat-carousel-slide>
       {{myvideo[currentSlideIndex].title}}
    </mat-carousel>

@Component({
  selector: 'your-component',
  templateUrl: 'your-component.html'
})
export class YourComponent {
  currentSlideIndex = 0;

  slides = [...];
}

Live demo

如何使用 *ngFor 之外的索引访问数据

How to access data with index outside *ngFor

angular

typescript

carousel

ngfor