为什么实现实体化和* ng的轮播无法动态地协同工作以获取图像和内容项

时间:2018-12-19 07:08:50

标签: angular typescript materialize

  

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

0 个答案:

没有答案