angular 2再現可能なコードを使用し、jsonデータを適切に表示するには

Question

私は角2にnoobです。私は本当にいくつかのreuableコードを作成する必要があります。

は、それは誰もが私はこのイマイチ権利を知っているように私は、この情報を表示することがsurpossedています方法を知っているんこの

answer1 = false; 
answer2 = false; 
answer3= false; 

onClick1(){ 
    this.answer1 = true; 
    this.answer2 = false; 
    this.answer3 = false; 
}; 

onClick2(){ 
    this.answer1 = false; 
    this.answer2 = true; 
    this.answer3 = false; 
}; 

onClick3(){ 
    this.answer1 = false; 
    this.answer2 = false; 
    this.answer3 = true; 
}; 

aswellの短いreuableバージョンを作成する方法があります。私はこのJSONコードに

[{ 
     "id": 1, 
     "question":"What do you think of the new platform?", 
     "Answers":{ 
     "answer1": "It's awesome", 
     "answer2": "It's no better than the old version", 
     "answer3": "It's confusing!"} 



    }]; 

を持っていると私はそれが情報の唯一のpeiceであっても* ngIfを使用してそれを表示するように見えることができますか？

<p (click)="onClick1()" [class.active]="answer1" *ngFor="#question of questions">{{question.Answers.answer1}}</p> 
<p (click)="onClick2()"[class.active]="answer2" *ngFor="#question of questions">{{question.Answers.answer2}}</p> 
<p (click)="onClick3()"[class.active]="answer3" *ngFor="#question of questions">{{question.Answers.answer3}}</p> 

誰でもアイデアがありますか？

Answer 1

あなたはそのような何かを試みることができる：

answers = { 
    answer1: false, 
    answer2: false, 
    answer3: false, 
}; 

onClick(answerNumber) { 
    Object.keys(this.answers).forEach((key) => this.answers[key] = false); 
    this.answers[answerNumber] = true; 
} 

をし、テンプレートでこのようにそれを使用します。https://plnkr.co/edit/6DenBCOfVnRRVy1rqPmN?p=preview：

<template ngFor #answer [ngForOf]="answers | keyValues"> 
    <p (click)="onClick(answer.key)" 
     [class.active]="answers[answer.key]" 
     *ngFor="#question of questions"> 
    {{question.Answers[answer.key]}} 
    </p> 
</template> 

このplunkrを参照してください。

キー/値のパイプはこの質問で説明されて

：

• print attributes values from JSON array in Angular2