Angular5 如何将类添加到*ngFor中特定选定的li元素

我有以下html代码片段

<ul>
    <li *ngFor="let report of searchResult.reports let i = index;">
       <input type="checkbox" [(ngModel)]="report.reportChecked" (click)="selectedReport(report, i)">
       <p kf-text weight="heavy" [ngClass]="{'bgColor': showBgd}">{{ report.name }}</p>
    </li>
</ul>

---

在我当前的实现中，当选中Report1并选择language English时，不会添加bgColor类。但是，如果选择了英语以外的语言（例如西班牙语），则bgColor类将添加到所有报表元素中，即使只选中了报表1。再次选中Report 1并将语言选择为西班牙语，如果现在选中Report 2，则将从所有元素中删除类bgColor，尽管该类应添加到Report 1元素中。我尝试了很多不同的方法，但仍然没有找到解决办法。在此方面的任何帮助都将不胜感激。

主要问题是

showBgd

是一个组件函数，因此它是一个对列表中所有实例都相同的单一值。理想情况下，您可以在

selectedLang

函数和

selectedReport

函数中为每个报表分配一个showBgd，但您没有引用相同的对象（这在

reportsWithLang

和

searchObject.reports

中可能也是如此）

因此，最好的方法可能是使用

reportHasLanguage

函数来计算背景颜色应该显示的每个列表项

在你看来，改变

[ngClass]=“{'bgColor'：showBgd}”

到

[ngClass]=“{'bgColor'：reportHasLanguage（report，selectedLanguage）}”

然后，在组件中添加一个函数：

reportHasLanguage(report, language) {
    // logic that can determine from a specific report object and the 
    // component level selectedLanguage object whether the BG Color
    // should be on
    return true; // for BG color on, false for off
}

我将为您填写该逻辑，但我不确定它是什么--我不知道对象是如何构造的，也不知道您是如何构造

reportsWithLang

对象或

searchObject.reports

对象的

下面重新评论：使用按集合跟踪选定对象的内容（而不是对象上的标志）简化内部逻辑可能更容易。如果这样做，您可以执行以下操作：

toggleReportSelected(report) {
    let idx = this.selectedReports.indexOf(report);
    if (idx < 0) this.selectedReports.push(report)
    else this.selectedReports.splice(idx,1)
}
findReports(searchParams) {
    this.foundReports = this.reports.find( report) => {
         return // logic matching report to searchParams
    });
}
reportIsSelected(report) {
    return this.selectedReports.indexOf(report) >= 0;
}

toggleReportSelected（报告）{
让idx=this.selectedReports.indexOf（报告）；
如果（idx<0），则此.selectedReports.push（报告）
否则此.selectedReports.splice（idx，1）
}
findReports（搜索参数）{
this.foundReports=this.reports.find（report）=>{
返回//逻辑匹配报告到searchParams
});
}
报告当选（报告）{
返回此.selectedReports.indexOf（report）>=0；
}

---

这种方法允许您使用任何触发器来切换选择或不选择的报表，并且始终可以访问应用程序正在使用的集合中所选报表的所有属性。如果需要，您还可以将复选框值绑定到

reportIsSelected

，或者您可以使用其他更奇特的方式来显示它它已被选中。

我在if-else条件和视图中进行了您建议的更改，但在任何情况下都不会添加bgColor类。原因是，我认为report.showBgd属性无法绑定到视图。如果您看到selectedLang函数，请注意我正在循环对象this.selectedReports，其中正如在selectedReport函数中创建的。但是要在视图中列出报告，使用的对象是this.SearchResult.reports。您完全正确。我没有注意到。您可以通过将报告复制到selectedReports中（而不是创建新对象）来解决此问题。我将更新答案。@yugrac，我不确定这是否有效，因为您还有一个

reportsWithLang

的集合，可能使用了任何一种类型的对象。事实上，它看起来像是在使用selectedReport函数中创建的对象，这将使此答案无效。我将创建另一个。我很瘦king我甚至可能不需要创建selectedReports对象，相反，我可以完全依赖searchResult.reports。我已经在使用condition report.reportChecked，它将验证我选择了哪些报告。如果是这样，我认为可能不需要selectedReports对象。我认为您是对的，尽管我不确定您的命令是否正确nt。有很多方法可以做到这一点。理想情况下，我发现最好有一个基本报告集合，它将引用所有可用的报告，一个foundReports集合，它引用与当前搜索匹配的所有报告，一个selectedReports集合，它引用所有选定的报告（不必担心复选框的值。我将在答案中添加一些来说明。）

reportHasLanguage(report, language) {
    // logic that can determine from a specific report object and the 
    // component level selectedLanguage object whether the BG Color
    // should be on
    return true; // for BG color on, false for off
}

toggleReportSelected(report) {
    let idx = this.selectedReports.indexOf(report);
    if (idx < 0) this.selectedReports.push(report)
    else this.selectedReports.splice(idx,1)
}
findReports(searchParams) {
    this.foundReports = this.reports.find( report) => {
         return // logic matching report to searchParams
    });
}
reportIsSelected(report) {
    return this.selectedReports.indexOf(report) >= 0;
}