Question

我正在使用一个用于发送SMS的组件，它像这样添加到导航栏组件中：

QJsonValue(array, QJsonArray([{"id":"number","name":"something"},{"id":"number","name":"something"},{"id":"number","name":"something"}])) 
is array

sms组件HTML如下所示：

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

方法<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本身未填充，也未显示div。该视图以某种方式没有检测到变化。触发了API调用，但是即使在控制台中也显示了错误消息。如何解决？

Answer 1

可能需要重新启动摘要循环。使用changeDetectorRef服务

constructor( 
    private changeDetectorRef: ChangeDetectorRef,
) {
}

在detectChanges方法内调用sendMessage方法

   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

Answer 2

我处理输入数据传递到组件的一种典型方法是将输入声明为BehaviorSubject。

例如：

import { Component, Input } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs/Rx';

@Component({
  selector: 'my-component-selector',
  templateUrl: './my.component.html'
})
export class MyComponent {

  @Input()
  public set yourErrorTextMessage(data) {
    this.yourErrorTextMessageSubject.next(data);
  };

  private yourErrorTextMessageSubject = new BehaviorSubject<string>("");

}

这是将实际值绑定到行为主体，并且模板会收到有关其任何更改的通知，包括模板初始化之前的值。这样，您的错误消息就可以异步更新，并且无论错误发生在初始化之前还是之后，您的组件都将获取最后一条错误消息的值。

角度模态不随组件变量的变化而更新

2 个答案: