-1

我有以下 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>

和

<ul>
  <li *ngFor="let language of languages" (click)="selectedLang(language)">
     {{ language.name }}
  <li>
<ul>

当我单击一个或多个特定报告然后选择一种语言时，我需要将类 bgColor 添加到没有该语言的一个或多个报告中。

示例：我有 3 份报告：报告 1（英语）、报告 2（西班牙语）、报告 3（英语、法语）

和 3 种语言：英语、西班牙语、法语

如果我检查报告 1和报告 2分别仅提供英语和西班牙语版本，并从下拉列表中选择语言英语 ，则需要将bgColor 类添加到报告 2，因为它在所选语言中不可用，在此案例英文。如果我检查Report 1和Report 3并且选择了语言西班牙语，则需要将类bgcolor添加到 Report 1 和 Report 3元素中。如果选择了英语，该类将不会添加到任何元素中，因为两者都有英语。最重要的是，无论检查哪个报告，如果它在所选语言中不可用，则将添加 bgColor 类。如果它是可用的类将不会被添加。可以随意检查或取消检查报告。

以下是打字稿片段

selectedReport(report, index) {
    if(report.reportChecked) {
        this.selectedReports.push({
            type: report.type,
            name: report.name,
            reportChecked: report.reportChecked
        });
        this.indexItems.push(index);
    } else {
        this.selectedReports = _.reject(this.selectedReports, (el) => {
            return el.type === report.type;
        });
        let indexRemove = this.indexItems.indexOf(index);
        if(indexRemove > -1) {
            this.indexItems.splice(indexRemove, 1);
        }
    }
}

selectedLang(language) {
        let reportType;
        let reportLanguage;
        this.selectedLanguage = language;
        this.selectedReports.forEach((report) => {
            if (report.reportChecked) {
                reportType = this.reportsWithLang.find((checkedReport) => {
                    return checkedReport.type === report.type;
                });
                reportLanguage = reportType.languages.find((language) => {
                    return language.id === this.selectedLanguage.id;
                });
                if(!reportLanguage) {
                    this.showBgd= true;
                } else {
                    this.showBgd= false;
                }
            }
        });
    }

在我当前的实现中，当检查报告 1 并选择语言英语时，不添加 bgColor 类。但是，如果选择了英语以外的语言，例如西班牙语，则 bgColor 类将添加到所有报表元素中，即使只选中了报表 1。再次保持 Report 1 被选中并且语言选择为西班牙语，如果 Report 2 现在被选中，类 bgColor 将从所有元素中删除，尽管该类应该添加到 Report 1 元素中。我尝试了很多不同的方法，但仍然无法提出解决方案。对此的任何帮助将不胜感激。

4

1 回答 1

0

主要问题是它showBgd是一个组件函数，因此它是一个值，对于列表中的所有实例都是相同的。理想情况下，您将为selectedLang函数和函数中的每个报告分配一个 showBgd，但您没有引用相同的对象（对于andselectedReport也可能是这样）。reportsWithLangsearchObject.reports

因此，最好的方法可能是使用一个reportHasLanguage函数来计算每个 listItem 应该显示背景颜色的位置。

在你看来，改变

[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对象的。

RE 评论如下：使用通过集合（而不是对象上的标志）跟踪所选对象的东西来简化内部逻辑可能更容易。如果这样做，您可以执行以下操作：

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;
}

这种方法允许您使用您想要切换或不选择报告的任何触发器，并且您始终可以访问应用程序正在使用的集合中所选报告的所有属性。如果需要，您还可以将复选框值绑定到reportIsSelected，或者您可以使用其他更奇特的方式来显示它已被选中。

于 2018-06-14T09:13:32.420 回答