这是我的组件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>