时间戳

首页 > 解决方案 > 循环遍历 Angular (*ngfor) 中的一组对象并一次仅显示一个对象，直到单击按钮

html - 循环遍历 Angular (*ngfor) 中的一组对象并一次仅显示一个对象，直到单击按钮

问题描述

我有一系列表单，当我遍历对象时，我试图一次只显示一个。一旦用户在那里输入响应并点击提交，我希望他们所在的表单到 .hide()，下一个表单到 .show()。这是一个可视化我的意思的视频。

https://youtu.be/Cfo7xihCxDw

这是我的 component.ts 文件：

import { Component, OnInit } from "@angular/core";
    declare var jQuery: any;
    
    @Component({
      selector: "app-home",
      templateUrl: "./home.component.html",
      styleUrls: ["./home.component.scss"],
    })
    export class HomeComponent implements OnInit {
      public show: boolean = false;
      public formName: any = "Show";
    
      cards = [
        {description: "Do you have a monthly student loan payment?"},
        {description: "Do you have a monthly car loan payment?"},
        {description: "Do you have a monthly car insurance payment?"},
        {description:"How much do you estimate you spend on gas for your car monthly?"},
        {description:"Do you have any monthly health/dental expenses?"}];

      ........

这是我的 html 文件：

</div>
      <form *ngFor="let card of cards;let i=index" ngForm #checkForm="ngForm" (submit)="getClicked(checkForm)" id="login-container">

      <div class="count"><h3>{{i+1}}/18</h3></div>

        <label><h1>{{card.description}}</h1></label>

        <label id="inputField"><i id="dollar" class="fas fa-dollar-sign"></i><i id="dollar" class="fas fa-dollar-sign"></i><i id="dollar" class="fas fa-dollar-sign"></i><input type="number" name="numbersInForm[card.description]" [(ngModel)]="numbersInForm[card.description]"
          id="input" class="form-input" placeholder="Ex: $100 or $0 if none"/></label>

      <button (click)="toggle()" type="submit">Next</button>

    </form>

标签： htmlangulartypescript

解决方案

这里是app.component.ts：

    import { Component, AfterViewInit } from '@angular/core';
    
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent implements AfterViewInit  {
        public count: number = 0;

        private _cards = [
            {descriptions: "Do you have a monthly student loan payment?"},
            {descriptions: "Do you have a monthly car insurance payment?"},
            {descriptions: "How much do you estimate you spend on gas for your car monthly?"},
            {descriptions: "Do you have any monthly health/dental expenses?"}
        ];
        public currentValue;
    
        ngAfterViewInit() {
          this.toggle()
        }
    
        getClicked(checkForm) {
    
        }
        toggle() {
          this.currentValue = this._cards[this.count].descriptions;
          document.getElementById('description').innerHTML = this.currentValue;
          document.getElementById('_count').innerHTML = (this.count + 1).toString();
          this.count += 1;
          if(this.count > 3) this.count = 0;
        }
    }

这里app.component.html：

<form ngForm #checkForm="ngForm" (submit)="getClicked(checkForm)" id="login-container">

  <div class="count" id="_count"><h3></h3></div>

  <label><h1 id="description"></h1></label>

  <label id="inputField"><i id="dollar" class="fas fa-dollar-sign"></i><i id="dollar" class="fas fa-dollar-sign"></i><i id="dollar" class="fas fa-dollar-sign"></i><input type="number" name="currentValue" [(ngModel)]="currentValue"
    id="input" class="form-input" placeholder="Ex: $100 or $0 if none"/></label>

  <button (click)="toggle()" type="submit">Next</button>

</form>

推荐阅读