如何访问索引在*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

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

<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 = [...];
}

现场演示

Answer 2

@站点，我认为您正在寻找ng容器-它不会创建额外的标签-

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

但实际上，我认为；标题"；应该在垫子转盘滑动内