Question

我有一个使用ngFor循环的div，现在每当我单击循环中的一个div时，我想要更改该特定div的文本颜色，然后在此之后如果我单击循环中的任何其他div，那个div只会改变他的颜色，之前点击的div会将其文本颜色改为初始值。 [仅使用Angular 2]。

例如：

<div *ngFor="let x of y; let i= index" (click)="changeColor()"></div>

Answer 1

解决问题的方法如下：

将模板代码更改为以下内容：

[ngClass]

请注意，我添加了changeColor(i)并将其与条件绑定。另请注意，索引已传递到public selectedIndex; changeColor(i){ this.selectedIndex = i; }

现在在您的组件类中：

.selected-color{
  background-color: red;
}

根据需要定义背景颜色的css类：

public  class ReceptionService:IReceptionService
    {
        private readonly DataContext _ctx;
        private readonly IAutomotiveRepository _automotiveRepository;
        private readonly IReferredRepository _referredRepository;
        private readonly IReceptionRepository _receptionRepository;
        private readonly IReceptionService _receptionService;
        private readonly IAutomotiveService _automotiveService;
        private readonly IReferredService _referredService;

        public ReceptionService(DataContext ctx, IReferredRepository ReferredRepository, IAutomotiveRepository AutomotiveRepository,IReceptionRepository ReceptionRepository,IReceptionService ReceptionService,IReferredService ReferredService,IAutomotiveService AutomotiveService)
        {
            _ctx = ctx;
            _automotiveRepository = AutomotiveRepository;
            _referredRepository = ReferredRepository;
            _receptionRepository = ReceptionRepository;
            _referredService = ReferredService;
            _automotiveService = AutomotiveService;
            _receptionService = ReceptionService;
        }
}

现在一切都应该正常工作。

如何更改由ngFor循环的div的文本颜色？

1 个答案: