Angular 7 - 使用单选按钮更改背景 div答案

【问题标题】：Angular 7 - To change background div using radio buttonAngular 7 - 使用单选按钮更改背景 div
【发布时间】：2019-02-20 00:35:30
【问题描述】：

这是html代码（home.component.html）：

<form #fNews="ngForm">
<app-news *ngFor="let data of contentNews" [data]="data"></app-news>
</form>

这是ts代码（home.component.ts）

this.contentNews = [  
   {  
      "idcontentnew":1,
      "title":"Productos"
   },
   {  
      "idcontentnew":2,
      "title":"Servicios"
   }
];

这是html代码（news.component.html）

<div class="row">
    <div class="col-md-12 col-xl-12 col-sm-12" [ngClass]="{'divSelected': data.idcontentnew == idSelected}">
        <div class="form-group">
            <input type="radio" id="inputIdNew{{data.idcontentnew}}" name="inputIdNew" (click)="selected(data.idcontentnew);" [(ngModel)]="inputIdNew" [value]="data.idcontentnew" /> <label for="id">Select new</label>
        </div>                
        <div class="form-group">
            <input id="inputTitle{{data.idcontentnew}}" name="inputTitle{{data.idcontentnew}}" type="text" value="{{data.title}}" />
        </div>
    </div> 
</div>

这是代码ts(news.component.ts)

@Input("data") data: any;

idSelected: any;

constructor() {
this.idSelected = null;
}

selected(idSelected: number) {
this.idSelected = idSelected;
}

我的问题是我只需要标记和更改所选 div 的背景。现在，如果我选择所有单选按钮，所有 div 的背景都会改变。

如果我直接在 home 组件中使用 ngFor，它会正常工作，但我想在单独的组件中执行新闻部分。

谢谢，

【问题讨论】：

标签： angular background radio-button

【解决方案1】：

这可能是因为 idSelected 变量与 home.component.html *ngFor 的每个 div 都附加为 true

尝试在 news.component.html 中应用 *ngFor 而不是 home.component.html 并在 news.component.ts 中定义 contentNews 变量

【讨论】：

对不起，我在创建问题时感到困惑，我有同名的问题，但它仍然不起作用
嘿@Eladerezador 我更新了我的答案，这可能会解决你所说的问题。