Question

我创建了一个卡片旋转木马，并为此使用了 mdb angular。轮播的代码在结构上看起来像这样：

<mdb-carousel [animation]="'fade'">
  <ng-container *ngFor="let i of test; let j = index">
    <mdb-carousel-item>
      <mdb-card
        class="card text-center"
        (click)="testFunction(j)"
        style="
          width: 15rem;
          margin-top: 10px;
          margin-bottom: 10px;
          margin-left: auto;
          margin-right: auto;
          cursor: pointer;
        "
        >{{ i }}
        <div
          class="card-body"
          style="
            padding-bottom: 0px !important;
            padding-left: 0px !important;
            padding-right: 0px !important;
            padding-top: 1rem !important;
            background-color: ghostwhite;
            font-weight: bold !important;
          "
        ></div>
      </mdb-card>
      <br />
    </mdb-carousel-item>
  </ng-container>
</mdb-carousel>

我在点击事件时调用一个函数，我正在那里传递 id。但是每次重复传递相同的 ID 时，它都无法根据 *ngFor 工作。以下是 .ts 文件示例

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-scheduled-events',
  templateUrl: './scheduled-events.component.html',
  styleUrls: ['./scheduled-events.component.scss']
})
export class ScheduledEventsComponent implements OnInit {
  constructor() { }

  test = [1, 2]

  testFunction(i) {
    console.log(i);
  }
}

理想情况下，它应该在第一张幻灯片上打印 1，在第二张幻灯片上打印 2，但是 2 在点击事件中被一遍又一遍地传递。我不确定我在这里缺少什么。任何帮助将不胜感激。

Answer 1

我从轮播中删除了 [animation]="'fade'"，它开始按预期工作。可能 mdb carousel 的动画脚本有问题。

角度轮播，轮播内的点击事件无法按预期工作

1 个答案: