清除 Angular 和 Ng-Bootstrap 中的 NgbModal 状态

Question

更新成功后如何清除模态框？当有错误更新时，我在模态上显示错误。成功更新后，我正在执行 form.reset 和 this.modalReference.close()。我想知道如何清除状态，这样当我再次打开模式时，错误就不会再存在了。

component.ts

updateUser() {....
    if (result.value) {
              ......subscribe(() => {
                  form.reset();
                  this.modalReference.close();
              }, err => {
                console.log(err);
                this.errors = err.error;
              });
            }
}

component.html

<app-error [errors]="errors"></app-error>
<tr>.....

error.component.ts

export class ErrorsComponent {
      formattedErrors: Array<string> = [];

      @Input()
      set errors(errorList: Errors) {
        this.formattedErrors = [];

        if (errorList.errors) {
          for (const field of Object.keys(errorList.errors)) {
            this.formattedErrors.push(`${field} ${errorList.errors[field]}`);
          }
        }
      };

      get errorList() { return this.formattedErrors; }

    }

Answer 1

我认为您误会了@Input 装饰器。 @Input 装饰器用于从父组件获取 data/input。就是这样。

// child.component.ts

@Input()
errors: string[];

// parent.component.ts
<child [errors]="my error varialbe in parent component"></child>

你检查this stackblitz basic example.

Answer 2

这就是答案。

将这段代码加入到编辑模态功能的开启中

this.errors = {};

清除 Angular 和 Ng-Bootstrap 中的 NgbModal 状态

Clear NgbModal State in Angular and Ng-Bootstrap

ng-bootstrap

angular

angular6

angular7