ngFor composants répétés boutons radio portée est pas isolé

Question

j'ai deux composants l'un est du message:

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; 
    } 
} 

l'autre fil d'actualité:

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 suis répéter composant de flux de nouvelles dans le composant post et quand e Ver je change le bouton radio dans l'un des composants répétés, je vois qu'il change dans tous les composants répétés. Peut-être que je m'approche de ce mauvais chemin que je suis nouveau à ang2. Toute aide est appréciée. In this link, I think I am facing similar issue, I know its angular1 but still the same issue.

Answer 1

Dans la classe composant parent:

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

modèle parent

:

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

Dans la classe du composant de l'enfant:

import{Input) from "@angular/core" 

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

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

Et

{{ 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 

Et here une lecture