如何在单击链接时获取相应的模态来自在角度 8 中使用 ng 引导程序的循环

Question

我有几个 li 标签，其数据来自循环。还有一个链接"图像"，当您单击它时，它应该打开相应的模式，例如对于"猫"行猫图像应该来，对于"建筑"行建筑图像应该来，对于"狒狒"行狒狒图像应该来。目前，单击"图像"链接时只有猫链接。您可以将这些链接用于特定图像 建筑 - https://homepages.cae.wisc.edu/~ece533/images/arctichare.png 狒狒 - https://homepages.cae.wisc.edu/~ece533/images/baboon.png，下面是带有演示网址的代码 https://stackblitz.com/edit/angular-327axj?file=src%2Fapp%2Fapp.component.ts

app.component.html

<hello name="{{ name }}"></hello>
<div>
<pre>
</pre>
<ul>
<li *ngFor="let item of statusdata" (click)="toggleActive(item, !item.active)">
<span>{{item.id}}</span>&nbsp;
<span>{{item.name}}</span>&nbsp;
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Image</button>
</li>
</ul>
</div>
<ng-template #content let-modal>
<div class="modal-header">
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<img style="width:100%" src="https://homepages.cae.wisc.edu/~ece533/images/cat.png" />
</div>
</ng-template>

<hr>

app.component.ts

import { Component } from '@angular/core';
import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
name = 'Angular';
statusdata: any;
closeResult: string;
constructor(private modalService: NgbModal) {}
ngOnInit() {
this.statusdata = [
{ id: 1, name: "Cat"},
{ id: 2, name: "Architecture"},
{ id: 3, name: "baboon" },

];
this.statusdata.forEach(item => {
this.getCacheItemStatus(item);
});
}
toggleActive(item, activeStatus = true) {
item.active = activeStatus;
localStorage.setItem(`item:${item.id}`, JSON.stringify(item));
}
getCacheItemStatus(item) {
const cachedItem = localStorage.getItem(`item:${item.id}`);
if (cachedItem) {
const parse = JSON.parse(cachedItem); // Parse cached version
item.active = parse.active; // If the cached storage item is active
}
}
open(content) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).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

现在，您正在模式中对图像 url 进行硬编码以使用 cat 图像，如下所示：

<img style="width:100%" src="https://homepages.cae.wisc.edu/~ece533/images/cat.png" />

这会导致相同的图像在所有模态中显示。 您可以为映像名称维护一个变量，并在打开模态时将其设置为所需的映像。 调用 open 方法时，传递将充当图像源的项名称：

<button class="btn btn-lg btn-outline-primary" (click)="open(content, item.name)">Image</button>

并在打字稿类中处理它：

open(content, source) {
this.imageSource = source;
...

其中图像源只是一个变量：

imageSource: any;

现在更新的图像 URL 将是：

<img style="width:100%" src="https://homepages.cae.wisc.edu/~ece533/images/{{imageSource}}.png" />

以下是更新的堆栈闪电战： https://stackblitz.com/edit/angular-bslf3q