【发布时间】：2017-01-29 04:08:02
【问题描述】：
我正在为我的应用程序使用带有语义 UI 的 angular 2(rc 4)。在从 productList 屏幕上的产品列表中删除产品之前，我正在使用语义 UI 模式进行确认。预期的功能如下： 1) 点击删除按钮 2) 用于确认的模态弹出窗口 3) 点击 no/deny，模式隐藏，返回 productList 屏幕。 4) 点击yes/approve，一个产品从列表中删除，productList屏幕更新，第二个模态弹出删除成功消息。
下面编写的代码可以正常工作，并且符合预期的第一个要删除的产品，但是当我单击另一个产品的删除时，会显示模态但不会触发模态上的单击事件，因此不会删除产品. 不确定第一次使用后模态是否从 DOM 中删除。有什么想法吗？提前致谢！
productList.html
` <body>
<table class="ui celled table">
<thead>
<tr>
<th>Date Range</th>
<th>Name</th>
<th>Frequency</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let product of products">
<td>{{ product.startDate | date: 'dd MMM y'}} - {{ product.endDate | date: 'dd MMM y' |
ifEmpty:'Ongoing'}}
</td>
<td>{{ product.name }}</td>
<td>{{ product.emailFrequency | titleCase : 1 }}</td>
<td>
<div class="ui stackable three columns grid">
<div class="column">
<button id="edit" class="ui icon basic button" (click)="editProduct(product)">
<img src="/img/edit.svg"/>
<label>Edit</label>
</button>
</div>
<div class="column">
<button id="deleteButton" class="ui icon basic button coupledModal">
<img src="/img/delete-button.svg"/>
<label>Delete</label>
</button>
<coupledModal (onClicked)="deleteProduct($event, product)"></coupledModal>
</div>
</div>
</td>
</tr>
</tbody>
</table>
`
模态组件.ts
` @Component({
selector: "coupledModal",
template: ``
<div class="ui small first coupled modal">
<div class="header">Are you sure?</div>
<div class="content">
<div class="description">
<p>If you delete this product, it will be gone forever.</p>
</div>
</div>
<div class="actions segments">
<button class="ui basic button grey deny" (click)="onClick(false)">
<i class="remove icon"></i>No thanks</button>
<button class="ui basic button approve" (click)="onClick(true)">
<i class="checkmark icon"></i>Yes please</button>
</div>
</div>
<div class="ui small second coupled modal">
<div class="header">Done!</div>
<div class="content">
<div class="description">
<i class="huge green check circle outline icon"></i>
<p>Product Deleted Successfully.</p>
</div>
</div>
<div class="actions">
<div class="ui basic button ok">
<i class="checkmark icon"></i>Done
</div>
</div>
</div>
`,
})
export class ConfirmModalComponent {
@Output() public onClicked = new EventEmitter<boolean>();
public ngAfterViewInit() {
/* tslint:disable */
$('.coupled.modal')
.modal({
allowMultiple: false,
closable : false,
// detachable: false,
selector : {
close : ".close, .actions .button",
approve : ".actions .approve, .actions .ok",
deny : ".actions .deny"
}
});
// show first of linked modals
$('.first.modal')
.modal('attach events', '.button.coupledModal')
;
// attach events to buttons
$('.second.modal')
.modal('attach events', '.first.modal .button.approve')
;
/* tslint:enable */
}
public onClick(approved) {
this.onClicked.emit(approved);
}
}`
list-component.ts
` @Component({
directives: [ ConfirmModalComponent],
pipes: [TitleCase, IfEmpty, StatusFormat],
providers: [SingleSignonDataService, ProductDataService],
selector: "productList",
templateUrl: "/templates/products/product-list-component.html",
})
export class ProductListComponent implements OnInit {
public products: Product[] = null;
public model: Product;
private dataService: ProductDataService;
constructor(dataService: ProductDataService,
private cookieService: CookieService, private signinService: SingleSignonDataService,
private directTo: Router) {
this.dataService = dataService;
}
public deleteProduct(userAction, product) {
if (userAction) {
this.dataService.deleteProduct(product.id)
.then(result => {
let exists = this.products.indexOf(product);
if (exists > -1) {
this.products.splice(exists, 1);
}
})
.catch((error) => {
this.errorState = JSON.stringify(error);
});
}
}
【问题讨论】：
标签： angular modal-dialog semantic-ui