angular - 如何刷新 Angular MDB 轮播？

Question

我在我的应用程序中使用 Angular MDB Carousel ( https://mdbootstrap.com/docs/angular/ ) 来显示项目列表。添加新项目时，我希望刷新轮播。但是，在添加项目并且新项目与当前幻灯片重叠后会出现渲染问题。

我怎么解决这个问题？

这是我的代码：

我的组件.html：

<mdb-carousel [animation]="'slide'" [interval]="'0'" [isControls]="false" #carousel> 
        <mdb-carousel-item *ngFor="let item of (this.getItems() | async)">
                <!-- ... -->
        </mdb-carousel-item>
</mdb-carousel>

<a href="javascript:void(0)" (click)="onSlidePrevious()">
  <mat-icon>keyboard_arrow_left</mat-icon>
</a>

<a href="javascript:void(0)" (click)="onSlideNext()">
  <mat-icon>keyboard_arrow_right</mat-icon>
</a>

我的组件.ts：

export class MyComponent implements OnInit, OnDestroy {
  @ViewChild('carousel') carousel: CarouselComponent;

  constructor(
    @Inject(MyService) public myService: MyService,
    public dialog: MatDialog
  ) {

  }

  ngOnDestroy(): void {
  }

  ngOnInit(): void {
  }

  getItems() {
    return this.myService.itemsChanged.asObservable();
  }

  onAddItem(newItem) {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.height = '500px';
    dialogConfig.autoFocus = false;
    dialogConfig.data = JSON.parse(JSON.stringify(newItem));

    const dialogRef = this.dialog.open(AddItemComponent, dialogConfig);

    dialogRef.componentInstance.save.subscribe(
      dataDialogForm => {
        if (dataDialogForm !== undefined) {
          let newItem= dataDialogForm;

          this.myService.saveNewItem(newItem);
        }
      }
    );
  }

  onSlidePrevious() {
    this.carousel.previousSlide();
  }

  onSlideNext() {
    this.carousel.nextSlide();
  }
}

我的服务.ts：

export class MyService {
     itemsChanged= new BehaviorSubject<>(this.data); 

     public saveNewItem(newItem) {
        const data = this.itemsChanged.getValue();

        data.unshift(newItem);

        this.itemsChanged.next(data);
     }
}

标签： angularcarousel