ng-bootstrap modal TypeError in promise答案

【问题标题】：ng-bootstrap modal TypeError in promiseng-bootstrap modal TypeError in promise
【发布时间】：2020-12-06 04:51:47
【问题描述】：

我在 Angular 4 应用程序中使用 @ng-bootstrap。

我能够打开一个模态实例并能够将数据传递给模态。在模态关闭时，我能够从模态中获得结果。

我面临的问题是我试图将结果分配给使用模态的父组件内的一些现有变量。但它显示以下错误。

错误错误：未捕获（承诺）：TypeError：无法读取未定义的属性“推送” TypeError：无法读取未定义的属性“推送”

下面是我写的显示模态的代码

import { Component, OnInit, Input } from '@angular/core';
import { AdminService } from "../admin.service";
import { NgbModal, ModalDismissReasons, NgbAlertConfig } from '@ng-bootstrap/ng-bootstrap';
import { NgAddModalComponent } from './add-modal.component';

@Component({
  selector: 'app-name-list',
  templateUrl: './name-list.component.html',
  styleUrls: ['./name-list.component.css'],
  providers: [NgbAlertConfig]
})
export class NameListComponent implements OnInit {
  errorMessage: string;
  name: string;
  nameList: [];

  constructor(private adminService: AdminService, private modalService: NgbModal) {}

    ngOnInit() {
        this.adminService.getNamelist()
        .subscribe(res => {
            this.nameList = res.name; //["john", "smith", "todd"]
        },
        error => this.errorMessage = <any>error);
    }

   onAddClick() {
        const modalRef = this.modalService.open(NgAddModalComponent, {size: 'lg'});//To open Modal
        modalRef.componentInstance.name = this.name;//To send data to Modal
        modalRef.result.then((result) => {//To subscribe data from Modal
        this.nameList.push(result.name); //Getting error on this line
    });
  }
}

任何帮助将不胜感激！！！

【问题讨论】：

你能在 Stackblitz 中重现它吗？那样帮助你会容易得多。

标签： angular bootstrap-4 ng-bootstrap

【解决方案1】：

解析结果promise时需要传递onReject函数

modalRef.result.then((result) => { 

    /* To subscribe data from Modal */

 }, (reason)=>{ 
 
  /*Leave empty or handle reject*/

 });

【讨论】：

【解决方案2】：

你对名单的声明是错误的。

您需要像这样声明它： nameList = [];

不是这样的： nameList: [];

【讨论】：

实际上我有一个由nameList 引用的模型。名称列表：名称模型[]；

【解决方案3】：

您可以这样处理解雇：

Component.ts：

import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
....

constructor(
    private modalService: NgbModal
) {}

modalRef: any;
closeResult: any;

openModal() {
  this.modalRef = this.modalService.open(SampleModalComponent);
  this.modalRef.result.then((result) => {
      console.log(result);
      },
      (reason) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
        console.log(this.closeResult);
      });
}

private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
}

【讨论】：