Angular 12个展示组件一一展示

Question

我有一个单词数组，我想通过卡片组件将每个单词一个一个地显示出来。如何一次只显示一个卡片组件，点击跳转到下一个？

(我想生成所有带有特定单词的卡片，而不仅仅是更改一张卡片中的单词。)

Answer 1

据我了解，您有一个名为 "app-card-component"?

的组件

我不确定你的理解水平如何，所以我将保持简单。

用数组显示组件时，通常会使用 *ngFor。所以在这种情况下它可能是：

<app-card-component *ngFor="let card of oneByOneArray; index as i"><app-card-component>

（oneByOneArray 是您将单词推送到的数组；一个接一个）。

为了一一显示这些词，我会使用一个单独的数组将这些词推送到点击时。

单击您可以使用我们现在在 *ngFor 中定义为索引的 i 来查找我们想要推送到我们的 oneByOneArray 的下一个单词。

所以执行此操作的函数可能如下所示：

pushWordWithIndex(i) {
   this.oneByOneArray.push(this.originalArray[i] + 1);
}

现在您可以像这样向卡片添加点击事件：

<app-card-component *ngFor="let card of oneByOneArray; index as i" (click)="pushWordWithIndex(i)"><app-card-component>

快速提示：

您应该在 ngOnInit 上启动 pushWordWithIndex 函数，否则它当然不会显示任何卡片。 this.pushWordWithIndex(0);.

Answer 2

以下可能与您要查找的内容接近？然后，您需要为隐藏和显示类之间的过渡设置动画，以获得您提到的 'jump'：

<div 
  *ngFor="let word of wordArray, let i = index" 
  [class.show]="selectedCard === i" 
  [class.hide]="selectedCard !== i"
  (click)="onCardClick(i)"
>
  {{ word }}
</div>


selectedCard: number = 0

onCardClick(id: number): void{
   this.selectedCard = id + 1
}

Answer 3

随着罗伊的回应，可能是这样的

HTML

<app-card-component *ngFor="let card of oneByOneArray"><app-card-component>    
<button (click)="nextWord()"></button>

组件

const words = ['word1', 'word2', 'wordN']
const oneByOneArray = [];

nextWord(){
   this.oneByOneArray.push(words.pop());
}

Angular 12个展示组件一一展示

Angular 12 display components one by one

typescript

angular-components

angular