Angular 7通过按钮单击迭代json

Question

正如我在标题中提到的，我想通过单击我的 json 响应的按钮进行迭代。请参阅下面我的 json 文件：

{
    "id": 2,
    "name": "Słownictwo",
    "flashcardLists": [
        {
            "id": 17,
            "frontside": "dasfasdv",
            "backside": "csdascd"

        },
        {
            "id": 18,
            "frontside": "dsadsaad",
            "backside": "sdasdadad"
        },
        {
            "id": 19,
            "frontside": "dasdsadd",
            "backside": "sdaddsa"
        }
    ]
}

抽认卡HTML：

<div  class="flip-container" (click)="flip()" [class.flipped]="flipped" >
    <mat-card-header></mat-card-header>
    <mat-card-content *ngFor="let flashcard of flashcardLists" class="flipper">
    <mat-card class="front">
       {{flashcard.frontside}}
    </mat-card>
    <mat-card class="back">
      {{flashcard.backside}}
    </mat-card>
    </mat-card-content>
</div>

我有一次我只想要一个“正面”和“背面”的组件。 接下来，它将被单击的按钮替换，这将增加计数器，但我不知道该怎么做。我尝试了类似flashcard[0].frontside 的方法，但结果是 KO。也许有人遇到过同样的问题，可以帮助我。

提前感谢所有答案

Answer 1

如果我理解正确的话，你想翻一张牌。

应该这样做：

<mat-card-content *ngFor="let flashcard of flashcardLists" class="flipper">
  <mat-card [class.front]="!flashcards[i].isFlipped"
            [class.back]="flashcards[i].isFlipped"
            (click)="flashcards[i].isFlipped = !flashcards[i].isFlipped "
            >
     {{ flashcards[i].isFlipped ? flashcard.backside : flashcard.frontside }}
  </mat-card>
</mat-card-content>

只需将此卡片状态图添加到您的组件：

flashcards: { [key: string]: boolean } = {};

Answer 2

您的mat-card-content 中不需要*ngFor，而是将其绑定到flipCard 变量，该变量将在按钮迭代单击时发生变化。至于正面或背面，请使用另一个变量isFront，您将在单击翻转按钮时对其进行更新。像这样：

component.html：

<mat-card>
  <mat-card-header></mat-card-header>
  <mat-card-content class="flipper">
    <div class="front" *ngIf="isFront">
      {{flashcard.frontside}}
    </div>
    <div class="back" *ngIf="!isFront">
      {{flashcard.backside}}
    </div>
  </mat-card-content>
  <mat-card-actions>
    <button (click)="iterate()" class="btn-flashcard" mat-button mat-raised-button id="previous">
      Następna
    </button>
    <button mat-button (click)="flip()" [class.flipped]="flipped">LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

component.ts：

flashcardList: any[] // use your flashCard class instead of any
flashcard: any; // use your flashCard class instead of any
isFront = true;

ngOnInit() {
  // init first card
  // flashcard = first card
}

iterate() {
  // logic for getting the next card
  // flashcard = next card
  // e.g.
  let index = this.flashcardList.indexOf(this.flashcard);
  this.flashcard = this.flashcardList[index + 1];
}

flip() {
  this.isFront = !this.isFront;
}