Angular 4将数据/参数传递给模式（使用ngfor）答案

【问题标题】：Angular 4 Passing data/parameters to a modal (using ngfor)Angular 4将数据/参数传递给模式（使用ngfor）
【发布时间】：2018-07-22 21:34:28
【问题描述】：

我是 Angular 4 的新手，我正在使用 ngFor 在数组中显示数据。每个插件都有许多用户和我设法从后端获取的这些用户（id、角色等）的列表（ spring boot 项目）。我要做的是显示这些用户的数量，当用户单击显示数字的按钮时，会弹出一个模式并显示这些用户的详细信息。所以我遇到的问题是如何将 {{addon.something}} 传递给模态。

       <tbody>
            <tr *ngFor="let addon of addons">
                <td>{{addon.name}}</td>
                <td>{{addon.url}}</td>
                <td>{{addon.location}}</td>
               <td>
                 <button class="btn btn-outline-primary" (click)="open(content,addon)" >{{addon.users.length}}</button>
                 <!--{{addon.users.length}}-->
                </td>

                <td>
                    <a routerLink="/assign_user_to_addon/{{addon.id}}">Add user</a>
                </td>
            </tr>
        </tbody>

我试图将它传递给(click)="open(content,addon)"，但它不起作用。

用于处理模态的打字稿代码：

 open(content:any,addon:any) {
    this.modalService.open(content).result.then((result) => {

      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  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}`;
    }
  }

将数据/参数传递给模态的最佳方式是什么？

【问题讨论】：

在您的情况下，“内容”的意图是什么？您是否尝试删除它并且只有“插件”（open（addon）） - 这通常应该从您的数组中传递项目。
我的回答对你有用还是你还在寻找解决方案？
@SergeyRudenko 我不确定，因为我从这个链接 ng-bootstrap.github.io/#/components/modal/examples 复制了代码，但它看起来确实是特定于模态本身的......
@vincecampanale 它仍然无法正常工作，从 (click)="open(xxx)" 函数或 this.modalService.open() 中删除内容会出错...
您尝试的新代码是什么，新的错误是什么？

标签： angular typescript bootstrap-modal ngfor

【解决方案1】：

我知道这是一个非常古老的问题，但我为此付出了很多努力。所以写在这里可能会对某人有所帮助。请注意，此答案适用于 Angular 6。

因此，如果您想将任何数据（可以是任何对象，如 Person）传递给孩子，可以这样做。

在子组件中，您需要使用 @Input() 注释声明该变量，例如：

  //Required imports
  export class ChildComponent implements OnInit {

  @Input() dataToTakeAsInput: any;

  ngOnInit() {
  }
  constructor() { }
}

现在要从父组件传递这个 dataToTakeAsInput，你可以使用 componentInstance 如下代码所示：

//Required imports
export class ParentComponent implements OnInit {

  dataPassToChild: any = null;

  constructor(private modalService: NgbModal) { }

  ngOnInit() {

  }
openChilldComponentModel(){

    const modalRef = this.modalService.open(ChildComponent, { size: 'lg',backdrop:false});

    (<ChildComponent>modalRef.componentInstance).dataToTakeAsInput = dataPassToChild;

    modalRef.result.then((result) => {
      console.log(result);
    }).catch( (result) => {
      console.log(result);
    });
  }
}

这样你可以传递多个对象。

【讨论】：

【解决方案2】：

您没有将addon 参数传递给modalService.open 方法。如果您想将数据从addon 传递到模态，看起来您只需要传递它（而不是content 参数）。在这个例子中：https://ng-bootstrap.github.io/#/components/modal/examples，我假设如果你删除content 参数并像这样传入addon：

html

(click)="open(addon)"

open(content) {
  this.modalService.open(content)...
}

要对此进行测试，请将所有内容保留在当前实现中，只需将参数更改为 this.modalService.open，如下所示：

this.modalService.open(addon)...

【讨论】：

如何传递多个参数