Angular Materialize CSS轮播故障

Question

带轮播的部分是我网站的核心，但以某种方式我无法使其工作几天。 我尝试了此question的解决方案。第一种方法不起作用，但第二种实现则严重故障。这种转盘组件的工作速度非常慢，转盘本身会出现故障，无法正常工作。请帮助我使其工作，否则我不知道该怎么办。

这是我的代码：

<div id="carousel_review" class="carousel">
    <div class="carousel-item" *ngFor="let post of posts; let i = index; let last = last" >
        <div class="card">
            <div class="card-content center">
                <span class="orange-text">{{ post.title }}</span>
                <ng-container *ngIf="last">{{initCarousel()}}</ng-container>
            </div>
        </div>
    </div>
</div>

app.ts

import { ActivatedRoute, Router } from '@angular/router';
import { PostModel } from 'src/app/model/post-model';
import { PostService } from 'src/app/services/post.service';

import { Component, Input, OnInit } from '@angular/core';
import M from 'node_modules/materialize-css/dist/js/materialize.min.js';

@Component({
  selector: 'app-recommended-posts',
  templateUrl: './recommended-posts.component.html',
  styleUrls: ['./recommended-posts.component.css']
})
export class RecommendedPostsComponent implements OnInit {

  options = { fullWidth: true, indicators: true };
  id: number;
  posts: PostModel[] = [];

  constructor(private postService: PostService, private router: Router, private route: ActivatedRoute) { }

  ngOnInit(): void {
    
    this.id = this.route.snapshot.params['id'];
    console.log(this.id);
    this.getRecommendedPosts();
  
   }

   initCarousel() {
    setTimeout(() => {
      let elems = document.querySelectorAll('.carousel');
      let instances = M.Carousel.init(elems, this.options);
    }, 10);
  }

 
   getRecommendedPosts(){
     this.postService.getRecommendedPosts(this.id).subscribe(
       data=> {
           this.posts = data;
       }
     )
   }
}

这是开发人员工具中的屏幕截图，class =“ carousel”闪烁，并且“滚动”出现并迅速消失。