typescript Angular 4 将数据/参数传递给模态（使用 ngfor）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48751149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 4 Passing data/parameters to a modal (using ngfor)
提问by med.b
i'm new to angular 4 and i'm displaying data inside an array using ngFor.Each addon has a number of users and list of these users(id,role,etc) that i managed to get from the backend(spring boot project).what i'm trying to do is display the number of these users,when the user clicks on the button displaying the number,a modal pops up and display the details of these users. So the problem i'm getting is how to pass the {{addon.something}} to the modal.
我是 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>
I tried to pass it into the (click)="open(content,addon)",but it's not working.
我试图将它传递给(click)="open(content,addon)"，但它不起作用。
Typescript code for handling the modal :
用于处理模态的打字稿代码：
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}`;
}
}
What could be the best way to pass data/parameters to a modal ?
将数据/参数传递给模态的最佳方法是什么？
采纳答案by vince
You're not passing the addonparameter to the modalService.openmethod. If you want to pass the data from addonto the modal, it looks like you just need to pass that (instead of the contentparameter). From this example: https://ng-bootstrap.github.io/#/components/modal/examples, I would assume that if you remove the contentparameter and just pass in addonlike so:
您没有将addon参数传递给modalService.open方法。如果您想将数据从addon模态传递到模态，看起来您只需要传递它（而不是content参数）。从这个例子：https: //ng-bootstrap.github.io/#/components/modal/examples，我假设如果你删除content参数并addon像这样传入：
html
html
(click)="open(addon)"
ts
ts
open(content) {
this.modalService.open(content)...
}
To test this, leave everything in your current implementation and just change the argument to this.modalService.openlike this:
要对此进行测试，请保留当前实现中的所有内容，并将参数更改为this.modalService.open如下所示：
this.modalService.open(addon)...
回答by Chandan Rajput
I Know it's very old question,but I struggled a lot to achieve this. So writing here that might help someone. Note that this answer is for Angular 6.
我知道这是一个非常古老的问题，但我为实现这一目标付出了很多努力。所以写在这里可能会对某人有所帮助。请注意，此答案适用于 Angular 6。
So If you want to pass any data (that can be any object like Person) to child this can be done like this.
因此，如果您想将任何数据（可以是像 Person 这样的任何对象）传递给 child，可以这样做。
In child component you need to declare that variable with @Input() annotation like :
在子组件中，您需要使用 @Input() 注释声明该变量，例如：
//Required imports
export class ChildComponent implements OnInit {
@Input() dataToTakeAsInput: any;
ngOnInit() {
}
constructor() { }
}
Now to pass this dataToTakeAsInput from parent component, you can use componentInstance as show in below code :
现在要从父组件传递这个 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);
});
}
}
Like this you can pass multiple objects.
像这样你可以传递多个对象。
