如何使用 *ngFor 外部的索引访问数据答案

【问题标题】：How to access data with index outside *ngFor如何使用 *ngFor 外部的索引访问数据
【发布时间】：2021-05-10 11:00:17
【问题描述】：

我想访问 *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>

请问您可以与我分享任何想法吗？有可能吗？

【问题讨论】：

这很不自然，我猜，它声明并用作本地模板变量，为什么要在外部访问它？我很确定无论您想做什么用例，都可以在没有这种黑客行为的情况下实现。如果你想在视频标签或轮播之外显示标题，你可以在那里使用它，使用 css 你可以做到。
我找不到一个好的css解决方案，要响应

标签： angular typescript carousel ngfor

【解决方案1】：

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

【讨论】：

【解决方案2】：

@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 里面

【讨论】：