2017-04-25 2 views
0

Angularjs 2でモーダルポップアップをインポートして表示する方法また、私はポップアップでtr値を表示したいと思います。Angularjsでモーダルポップアップを追加する方法2

私はAngularjsから新しくなりました。 **この

environment_app.component.ts

import {Component} from "angular2/core"; 

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/hello.component.html' 
}) 

export class AppComponent { 
    constructor() {  

    } 
    removeItem(index){ 
     this.itemList.splice(index, 1); 
    } 

    IsHidden= false; 
    onSelect(item){ 
     item.IsHidden = !item.IsHidden; 
    } 

} 

environment_main.ts

import {bootstrap} from "angular2/platform/browser" 
import {AppComponent} from "./environment_app.component" 

bootstrap(AppComponent); 

html

を実装する方法を私を導いてください

<div class="container"> 
<br><br><br> 
<h2>Customer Order Report</h2> 
<table class="table table-striped" *ngIf="itemList.length"> 
    <thead> 
     <tr> 
     <th class="text-center">S.No</th> 
     <th class="text-center">Name</th> 
     <th class="text-center">Email</th> 
     <th class="text-center">City</th> 
     <th class="text-center">Action</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="#item of itemList; #i = index"> 
     <td class="text-center">{{i+1}}</td> 
     <td class="text-center">{{item.name}}</td> 
     <td class="text-center">{{item.email}}</td> 
     <td class="text-center">{{item.city}}</td> 
     <td class="text-center"><span (click)="removeItem($index)" class="glyphicon glyphicon-remove pointer"></span> 
     <span>Edit</span></td> 
     </tr>  
    </tbody> 
    </table> 
    <div *ngIf="!itemList.length" class="nodata"> No Data Available........</div> 
</div> 

これを実装する方法は?

あなたはそれのためにngPrimeのようなサードパーティ製のポップアップやangular2材料を使用することができますも

答えて

0

それを説明していただけます。あなたはREADME.mdを読んだり、ウェブサイトにアクセスしたりすることができます

+0

実際にはブートストラップモーダルポップアップを望みません –

+0

使用できる角度に組み込まれたブートストラップからモーダルがあります –

+0

私は今どのように使用しているのですか? js –

関連する問題