Angular 7 - для изменения фона div с помощью переключателя - PullRequest
Новая
       9

Angular 7 - для изменения фона div с помощью переключателя

0 голосов
/ 19 февраля 2019

Это 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.Теперь, если я выберу все переключатели, фон всех элементов будет изменен.

Если бы я сделал это с помощью ngFor непосредственно в домашнем компоненте, он бы работал нормально, но я хочу сделать новостиСекция в отдельном компоненте.

Спасибо,

1 Ответ

0 голосов
/ 19 февраля 2019

Это может происходить из-за того, что переменная idSelected прикрепляется как true с каждым div для home.component.html * ngFor

Попробуйте применить * ngFor в news.component.html вместо home.component.html итакже определите переменную contentNews в news.component.ts

...