角度调用函数在HTML中的结果

Question

我的ts文件中有一个函数：

makeid(length) {
    var result = '';
    var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var charactersLength = characters.length;
    for ( var i = 0; i < length; i++ ) {
       result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return result;
 }

我想要的是在我的HTML中返回这个函数的结果。我可以调用html中的函数，如：

<input [readonly]="true" formControlName="caseId" matInput placeholder="Radni nalog br:" value="{{ makeid(15) }}">

但每次单击任何位置时,它都会更改值,而我会得到一个错误：

ExpressionChangedAfterithasBeenCheckedError：表达式在检查后已更改。

Answer 1

您应该使用[(ngModel)]或在component.ts文件中放置一个变量，然后用函数更改该变量，html将自动更改：

类似这样的东西

 <input id="Last Name" name="Last Name" type="text" [(ngModel)]="user.lastName" />

此stackblitz将帮助您https://stackblitz.com/edit/Angular-6-value-changes-v2？file=src%2fapp%2fapp.component.html