ngFor繰り返しコンポーネントのラジオボタンの範囲は、私は1つのポストである二つの成分を持っている何の孤立

Question

ではありません：

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'post', 
    template: ` 
    <h1>{{title}}</h1> 
    <p>{{postText}}</p> 
    <ul> 
     <li *ngFor="let postData of posts"> 
     <news-feed></news-feed> 
     </li> 
    </ul> 
    ` 
}) 
export class Post { 
    title : string; 
    postText : string; 
    posts = [{title:"Post1",postText:"Wow greate post"}, {title:"Post1",postText:"Wow greate post"}] 
    constructor(title:string, postText:string) { 
     this.title = title; 
     this.postText = postText; 
    } 
} 

他のニュースフィードです：

import {Component} from '@angular/core'; 

    @Component({ 
     selector: 'news-feed', 
     template: ` 
     <h1>News Feed</h1> 
     <div class="radios"> 
      <div class="form-check form-check-inline"> 
       <label class="form-check-label"> 
       <input class="form-check-input" type="radio" value="success" [(ngModel)]="commandResult.type (change)="getCommandResult()"> Succeeded 
       </label> 
      </div> 
      <div class="form-check form-check-inline"> 
       <label class="form-check-label"> 
       <input class="form-check-input" type="radio" value="fail [(ngModel)]="commandResult.type (change)="getCommandResult()"> Failed 
      </label> 
      </div> 
     </div>` 
    }) 
    export class NewsFeed { 
     commandResult: any = { 
      type: 'fail' 
     }; 
     constructor() { 
     } 
     getCommandResult() {} 
    } 

Iポストコンポーネント内のニュースフィードコンポーネントを繰り返しています。 ver繰り返しコンポーネントのいずれかのラジオボタンを変更します。繰り返しコンポーネントすべてが変更されることがわかります。おそらく、私はang2を初めて使ったので、間違った方法でこれに近づいています。どんな助けもありがとうございます。親コンポーネントクラスでIn this link, I think I am facing similar issue, I know its angular1 but still the same issue.

Answer 1

：

export class Post { 
    title : string; 
    postText : string; 
    posts = [{type:1, title:"Post1",postText:"Wow greate post"}, {type: 0, title:"Post1",postText:"Wow greate post"}] 
.... 

親テンプレート：子コンポーネントのクラスで

<li *ngFor="let postData of posts"> 
     <news-feed [commandResult]=postData></news-feed> 
    </li> 

：

import{Input) from "@angular/core" 

export class NewsFeed { 
     @Input() commandResult: any ; 
     ....... 

     setCommandResult(value): void { 
      this.commandResult.type = value; 
     } 
} 

そして

{{ commandResult.title }} 
    <input type="radio" (change)="setCommandResult(1)" [value]="1" [checked]="commandResult.type===1">Succeeded 
    <input type="radio" (change)="setCommandResult(2)" [value]="2" [checked]="commandResult.type===2">Failed 

そしてhere