在Angular(*ngfo)中循环一组对象，每次只显示一个对象，直到单击按钮

Question

我有一系列表单，当我循环遍历对象时，我试图一次只显示一个。一旦用户输入响应并点击提交，我希望他们所在的表单为.hide((，下一个表单为.show((。下面是一个视频，可以直观地显示我的意思。

https://youtu.be/Cfo7xihCxDw

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

Answer 1

这里是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>