Question

我想使用DOM操作制作一个简单的轮播，我不知道我是否可以在Angular中做到这一点，但是我的想法是我创建了一个对象数组，这些对象具有要使用的属性传递给HTML插值，我还不知道该怎么做。这是我的代码：

    <div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <h1 class="mt-5 mb-1"><strong>carousel</strong></h1>
        <div class="container">
          <div class="row">
            <div class="col-12">
              <div class="carousel-container">
                <div class="carousel-cell">
                  <div class="row text-center">
                    <div class="col-12">
                      <div class="row carousel-control">
                          <div class="col-2 carousel-prev fa-2x" (click)="carouselPrev()">
                              <fa-icon [icon]="faChevronLeft" class="mr-2"></fa-icon>
                          </div>
                          <div class="col-7 col-md-2">
                            <div class="carousel-image">
                              <img [src]="carousel.image" alt="carousel image">
                            </div>
                          </div>
                          <div class="col-2 carousel-next fa-2x" (click)="carouselNext()">
                              <fa-icon [icon]="faChevronRight" class="mr-2"></fa-icon>
                          </div>
                      </div>
                </div>
                    <div class="col-12">
                      <div class="carousel-text mt-4">
                        <h3>{{carousel.description}}</h3>
                        <p><em> {{carousel.name}}, <span>{{carousel.affiliation}}</span></em></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import {faChevronLeft, faChevronRight, IconDefinition} from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-carousel',
  templateUrl: './carousel.component.html',
  styleUrls: ['./carousel.component.scss']
})
export class CarouselComponent implements OnInit {
  faChevronLeft: IconDefinition = faChevronLeft;
  faChevronRight: IconDefinition = faChevronRight;
  carousel = [
    {
      id: 1,
      name: 'captain america',
      affiliation: 'camp lehigh',
      description: 'language!',
      image: 'http://picsum.photos/200'
    },
    {
      id: 2,
      name: 'thor',
      affiliation: 'asgard',
      description: 'i am god of thunder!',
      image: 'http://picsum.photos/200'
    },
    {
      id: 3,
      name: 'tony stark',
      affiliation: 'stark industries',
      description: 'and i....am..iron man!',
      image: 'http://picsum.photos/200'
    }
  ];


  constructor(
  ) {}

  ngOnInit() {
  }

  carouselPrev() {
     // i want to make this a control by making the id/index +1
  }

  carouselNext() {
    // i want to make this a control by making the id/index -1
  }
 }

Answer 1

您可以使用带有 index 的 ngFor 来实现。

实时示例：https://stackblitz.com/edit/angular-b5qvwy

某些代码：

基本HTML

<h1>{{list[i].name}}</h1>
<div (click)="prev()"><</div>
<div (click)="next()">></div>

基本TS代码

 export class AppComponent  {
      list = [
        {
          name: "Jhon"
        },
        {
          name: "Joe"
        },
        {
          name: "Marth"
        }
      ];

      i = 0;

      prev(){
        if(this.i > 0){
          this.i--;
        }
      }

      next(){
        if(this.i < this.list.length -1){
          this.i++;
        }
      }
    }

在您的示例中，只需在 html 中完成该操作：

<div class="container">
    <div class="row">
      <div class="col-12 text-center">
        <h1 class="mt-5 mb-1"><strong>carousel</strong></h1>
        <div class="container">
          <div class="row">
            <div class="col-12">
              <div class="carousel-container">
                <div class="carousel-cell" *ngIf="carousel[i].id">
                  <div class="row text-center">
                    <div class="col-12">
                      <div class="row carousel-control">
                          <div class="col-2 carousel-prev fa-2x" (click)="carouselPrev()">
                              <fa-icon [icon]="faChevronLeft" class="mr-2"></fa-icon>
                          </div>
                          <div class="col-7 col-md-2">
                            <div class="carousel-image">
                              <img [src]="carousel[i].image" alt="carousel image">
                            </div>
                          </div>
                          <div class="col-2 carousel-next fa-2x" (click)="carouselNext()">
                              <fa-icon [icon]="faChevronRight" class="mr-2"></fa-icon>
                          </div>
                      </div>
                </div>
                    <div class="col-12">
                      <div class="carousel-text mt-4">
                        <h3>{{carousel[i].description}}</h3>
                        <p><em> {{carousel[i].name}}, <span>{{carousel[i].affiliation}}</span></em></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

如何将数组对象属性值插入HTML？

1 个答案: