配列内の特定のオブジェクトにチェックされた値をリンクする方法

Question

調査のための小さなアンケートを準備しています。私は評価を与えるためにスターコンポーネントを作成しましたが、問題はどのようにしてこのスター値を特定の質問にリンクさせることができるかです。ここまで私は今まで何をしたのですか？ここで

は、あなたがする必要があるのはスターへのパスの質問IDであるマイスターコンポーネントが

@Component({ 
    selector: 'app-star', 
    template: `<div class="rating"> 
    <input type="radio" value="3" [checked]="rating===3" /> <label (click)='onClick(3)'></label> 

    <input type="radio" value="2" [checked]="rating===2" /> <label (click)='onClick(2)'></label> 

    <input type="radio" value="1" [checked]="rating===1" /> <label (click)='onClick(1)'></label> 
</div><br><br> 

<h1 *ngIf="ratbool == true">Your rating is :{{rating}}</h1>`, 
    styleUrls: ['./star.component.css'] 
}) 
export class StarComponent { 
    @Output() ratingno: EventEmitter<any> = new EventEmitter<any>(); 

    rating: number; 
    ratbool: boolean = false; 
    ngOnInit() { 

    } 
    onClick(rating: number): void { 
    this.ratingno.emit(rating); 
    this.rating = rating; 
    this.ratbool = true; 
    } 

} 

私のアプリのコンポーネントが

export interface type{ 
    id:number; 
    text:string; 
} 

@Component({ 
    selector: 'app-root', 
    template:` 
    <ul *ngFor="let sur of mySentences"> 
    <li>{{sur.text}}</li> <app-star (ratingno)="doSomething($event)"></app-star> 
    </ul> 

    <button (click)="submit(mySentences)">submit</button>`, 
    styleUrls: ['./app.component.css'], 
}) 

export class AppComponent { 
    rating:number; 

    mySentences:type[] = [ 
    {id: 1, text: 'question 1'}, 
    {id: 2, text: 'question 2'}, 
    {id: 3, text: 'question 3'}, 
]; 

doSomething(rating){ 
    this.rating=rating; 
} 

submit(j){ 
    console.log(j); 
} 
} 

Answer 1

である出力

が

なっています@Inputを経由して、ユーザーが

---

star.component.ts

export class StarComponent { 
    @Output() ratingno: EventEmitter<any> = new EventEmitter<any>(); 
    @Input() question_id:Number; 

    rating:any; 
    ..... 
    onClick(rating: number): void { 
    this.ratingno.emit({question_id , rating}); 
    this.rating = rating; 
    this.ratbool = true; 
    } 
} 

app.component.ts

... 
<li>{{sur.text}}</li> <app-star [question_id]='sur.id' (ratingno)="doSomething($event)"></app-star> 
...