Question

我是angular 4的新手，我使用ngFor在数组中显示数据。每个插件都有许多用户和我设法获得的这些用户列表（ID，角色等）从后端（春季启动项目）。我想要做的是显示这些用户的数量，当用户点击显示数字的按钮时，会弹出一个模式并显示这些用户的详细信息。所以我遇到的问题是如何将{{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}`;
    }
  }

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

Answer 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);
    });
  }
}

像这样，您可以传递多个对象。

Answer 2

您没有将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)...

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

2 个答案: