angular - 为什么 materializecss 和 *ngFor 的轮播不能动态协同工作以获取图像和内容项

Question

这是我的组件 ts 文件和我的组件 html 文件。chrome 的控制台不会返回任何错误，但不会出现轮播。当我在 chrome 的网络选项卡上看到它时，后端数据返回正常。当我使用简单的 JSON 从 ts 文件中检索它时，轮播也不会出现。我错过了什么？

import { Component, OnInit } from '@angular/core';
import { AdminService, } from "../../services/admin.service";
import{ DataSharingService } from "../../services/data-sharing.service";
import { Router } from "@angular/router";
import * as M from 'node_modules/materialize-css';

@Component({
  selector: 'app-car-selection',
  templateUrl: './car-selection.component.html',
  styleUrls: ['./car-selection.component.css']
})
export class CarSelectionComponent implements OnInit {
 
  
  vehicletypes: any[];
  options = {fullWidth: true, indicators: true};

  constructor(
    private admin : AdminService,
    private dataSharingService:DataSharingService,
    private router: Router ) {
  }
  
  ngOnInit() {
  this.getvehicleType();
  this.initialized();
  }

  initialized(){
    var elems = document.querySelectorAll('.carousel');
    var instances = M.Carousel.init(elems, this.options);
  }

  
  getvehicleType() 
  {
  this.admin.getVehicleType().subscribe(
      result => {
        this.vehicletypes = result;
      
          }
  )}
    
  submit(sendInfo)
    {
      this.dataSharingService.sendSelectedCar(sendInfo);
      this.router.navigateByUrl('choose-location');

    }
  }

<div class="container-fluid" style="background-color:aqua">
    <div *ngFor="let vehicletypes of vehicletypes; let i=index"  (click)="submit(vehicletypes)">
        <div class="carousel carousel-slider center">
            <div class="carousel-item amber black-text">  
                <h5>{{vehicletypes.name}}</h5>
                    <img class="responsive-img" [src]="vehicletypes.picturePath">
                <div class="carousel-fixed-item center">
                    <div class="row">
                        <div class="col s6"><ul><li><a class="btn-floating red"><i class="material-icons">people</i></a>{{vehicletypes.capacity}}</li></ul></div> 
                        <div class="col s6"><ul><li><a class="btn-floating red"><i class="material-icons">attach_money</i></a>{{vehicletypes.price}}</li></ul></div> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 

标签： angulartypescriptmaterialize