Question

我最近开始学习角度，并想创建一个滑块。

我创建了一个对象数组，该数组将保存滑块图像的数据，并尝试将其显示在组件html文件中，如下所示：

Ts文件：

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    type sliderImgMeta = Array<{id:number,src:string,alt:string}>;

    const arr: sliderImgMeta = [
      {id: 1, src: './img/slider1', alt: 'alt1'},
      {id: 2, src: './img/slider2', alt: 'alt2'},
      {id: 3, src: './img/slider3', alt: 'alt3'}
    ]
  }

}

和html文件：

<section id="slider">
  <div id="slider-content">
    <img src="{{arr[0].src}}" alt="{{arr[0].alt}}">
  </div>
  <div id="slider-navigation">
    <span id="moveLeft"><</span>
    <span id="moveRight">></span>
  </div>
</section>

作为回报，我得到ERROR TypeError: Cannot read property '0' of undefined，不幸的是不知道如何解决它。

Answer 1

您的类中没有arr属性，而是在ngOnInit中创建了只能在其内部访问的变量，请尝试这种方式并注意sliderImgMeta类型应该在外部上课

import { Component, OnInit } from '@angular/core';

type sliderImgMeta = Array<{id:number,src:string,alt:string}>;

@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.scss']
})
export class SliderComponent implements OnInit {
  arr: sliderImgMeta = [];
  constructor() { }

  ngOnInit() {
    this.arr = [
      {id: 1, src: './img/slider1', alt: 'alt1'},
      {id: 2, src: './img/slider2', alt: 'alt2'},
      {id: 3, src: './img/slider3', alt: 'alt3'}
    ]
  }

}

Answer 2

您可以在类中定义属性以从视图进行访问。

    import { Component, OnInit } from '@angular/core';
    @Component({
      selector: 'app-slider',
      templateUrl: './slider.component.html',
      styleUrls: ['./slider.component.scss']
    })

    type sliderImgMeta = Array<{id:number,src:string,alt:string}>;    

    export class SliderComponent implements OnInit {

      arr: sliderImgMeta = [
          {id: 1, src: './img/slider1', alt: 'alt1'},
          {id: 2, src: './img/slider2', alt: 'alt2'},
          {id: 3, src: './img/slider3', alt: 'alt3'}
        ];

      constructor() { }

      ngOnInit() {

      }

    }

html

2 个答案: