Ionic Angular：如何在值更改时重新渲染按钮答案

【问题标题】：Ionic Angular: How to re-render button when a value is changedIonic Angular：如何在值更改时重新渲染按钮
【发布时间】：2022-07-26 22:48:22
【问题描述】：

我有以下几点：

<ion-input slot="end" (click)="presentPicker('custom1')" value {{conversion.formatDisplayedTime(dta.custom1)}}" readonly="true" type="text"></ion-input>
        
<ion-icon *ngIf="conversion.checkTimeNotNull(dta.custom1)" 
(click)="appendTotalTime('custom1')" color="success" slot="end" name="checkmark-outline"></ion-icon>

可以看出，该图标具有 ngIf conversion.formatDisplayTime()，最初在页面加载时调用。我想知道当上述输入中的值更改时如何重新渲染它？有没有办法链接？

谢谢大家

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

这个问题可能有多种原因，但要摆脱它并拥有更清晰的代码，你应该知道一些事情。

为一个值出价为方法/函数是一个错误，当然也有例外和事件绑定（如(click)="onClick"）是完全正确的。但是像[class]="getClass()" 或<p> {{getText()}} </p> 这样的绑定真的很脏。那是因为angular无法知道函数result的值什么时候会发生变化，所以它会无限循环调用它，即使结果总是一样。

执行这种绑定的最好方法是强制属性使用一个大规则：仅当您更改输入时才更改结果。对于可能需要 Observables、Subjects、...的简单值

就您而言，我认为您正在尝试格式化日期。在不更改值的情况下格式化 tempate 的最佳方法是 Angular Pipes，尤其是 Angular DatePipe。如果它不适合您自己的使用，您可以轻松创建自定义管道，有很多教程，这是响应式的，因为 Angular 只会在输入更改时重新计算转换值。

希望这会有所帮助。

【讨论】：