Angular 4 将 data/parameters 传递给模态（使用 ngfor）

Question

我是 angular 4 的新手，我正在使用 ngFor.Each 在数组中显示数据我设法从后端（spring 引导项目）获得。我想做的是显示这些用户的数量，当用户单击显示数字的按钮时，会弹出一个模式并显示这些用户的详细信息。所以我遇到的问题是如何将 {{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)" 中，但它不起作用。

用于处理模态的 Typescript 代码：

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

将 data/parameters 传递给模态框的最佳方式是什么？

Answer 1

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

html

(click)="open(addon)"

ts

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

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

this.modalService.open(addon)...

Answer 2

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

因此，如果您想将任何数据（可以是任何 object，例如 Person）传递给 child，可以这样做。

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

  //Required imports
  export class ChildComponent implements OnInit {

  @Input() dataToTakeAsInput: any;

  ngOnInit() {
  }
  constructor() { }
}

现在要从 parent 组件传递此 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);
    });
  }
}

像这样你可以传递多个 objects。

Angular 4 将 data/parameters 传递给模态（使用 ngfor）

Angular 4 Passing data/parameters to a modal (using ngfor)

typescript

bootstrap-modal

ngfor

angular