Angular 6 - 如何在条件语句中改变组件模板中的值

Question

我想显示或隐藏下面的“separator-container”，如果任何一行数据满足特定条件（如代码第5行中的“myConditionCheck”）。

我尝试通过将“isWarningSeperatorVisible”作为控制器类变量并尝试在HTML代码中更改它来实现。无法找到在IF条件下更改它的方法。有人能帮助我如何在IF条件下更改控制器变量或以其他方式实现此用例吗？

<div class="separator-container" *ngIf="isWarningSeperatorVisible">
     My Separator heading
</div>

<ng-container *ngFor="let rowData of rowArray;">
   <div class="cards-row" *ngIf="rowData.myConditionCheck; let isWarningSeperatorVisible"> 
    <div>
        Some content goes here
     </div>
    </div>
</ng-container>

- Avengers

---

你不能这样做 <div class="separator-container" *ngIf="!myConditionCheck"> 吗？ - Augustin R

我刚刚更新了问题。'myConditionCheck' 基于它上面的每个 ngFor 实例产生的数据。如果其中一个条件满足，一些内容将显示在其下方，并且必须有一个标题来表示该内容。我也可以循环分隔符以了解是否有任何符合条件的数据。但那样会效率低下。 - Avengers

你在rowArray里有什么？ - pradip shinde

把它看作是构建表格的数据。它有二维数据，n行4个属性。其中一个属性是布尔值，如果为真，则必须显示该行数据以及其上方的分隔符。 - Avengers

Answer 1

你可以做以下事情：

在 .html 文件中：

<div class="separator-container" *ngIf="check()">

在.ts文件中:

check(){
    return this.rowArray.some((row)=>row.myConditionCheck)
}

这是一个关于IT技术的StackBlitz示例。

- Augustin R

---

返回一个布尔值，你可以使用 some 而不是 find。 - ConnorsFan

你是对的，我习惯使用 lodash 而不是“vanilla”js。更新了答案。 - Augustin R

谢谢你的回答。有没有办法在HTML模板中更改布尔变量的值？这个解决方案对我很有用。但我仍然想知道在模板中更改值的选项，以避免两次解析数据。 - Avengers

据我所知，你只能通过触发事件来实现这一点。事件可以是DOM事件，如（click），（change），（focus），也可以是Angular事件，如（ngOnChange）。希望你能找到一个适合你需求的事件。 - Augustin R