gpt4 book ai didi

javascript - Angular 模态不随组件变量变化而更新

转载 作者:行者123 更新时间:2023-12-01 01:38:57 26 4
gpt4 key购买 nike

我正在使用一个组件来发送短信,并将其添加到导航栏组件中,如下所示:

<ng-template #smsModal let-c="close" let-d="dismiss">
<div class="modal">
<app-sms></app-sms>
</div>
</ng-template>

短信组件 HTML 如下所示:

    <form>
<input type="text" [(ngModel)]="send.mobileNumber" #ctrl="ngModel" name="mobileNumber">

<button class="send-SMS-btn ripple" (click)="sendMessage()" [disabled]="textSending">
<span *ngIf="!textSending">Send Message</span>
<app-spinner *ngIf="textSending"></app-spinner>
</button>
<div class="textmsg text-danger" *ngIf="textError">{{textError}}</div>
<div class="textmsg success" *ngIf="textSuccess">{{textSuccess}}</div>
</form>

方法sendMessage()具有以下代码:

 this.textSending    = false;

if (_.isEmpty(this.send.mobileNumber)) {
this.textError = "Please enter a valid phone number";
return false;
}

this.textSending = true;
this.textSuccess = null;

// API call and stuff
}

当我控制台 this.textError 时,它给出了正确的错误消息,但 View 中没有更新。错误容器 div 本身未填充,并且 spinner 也未显示。不知何故, View 没有检测到更改。 API 调用被触发,但它也没有显示错误消息,即使它显示在控制台中。如何解决这个问题?

最佳答案

可能需要再次重新启动摘要周期。使用 changeDetectorRef 服务

constructor( 
private changeDetectorRef: ChangeDetectorRef,
) {
}

sendMessage方法中调用detectChanges方法

   if (_.isEmpty(this.send.mobileNumber)) {
this.textError = "Please enter a valid phone number";
return false;
}

this.textSending = true;
this.textSuccess = null;

this.changeDetectorRef.detectChanges(); // start the cycle again

关于javascript - Angular 模态不随组件变量变化而更新,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52590305/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com