Bootstrap成功消息 - Angular 2

Question

嘗試在單擊「deleteTeam」按鈕時添加成功消息/彈出到屏幕。新來的角2，如何做到這一點任何想法將是巨大的感謝:)

myteams.component.html

<div class="mdl-grid titleStyle"> 
<div class="mdl-cell mdl-cell--12-col">My Teams</div> 
</div> 

<div class="container-fluid page-cont"> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12" style="margin-bottom:30px;"> 
      <ul class="progressbar"> 
        <li>Create a Team</li> 
        <li class="active">My Teams</li> 
        <li>Load Board</li> 
        <li>Play</li> 
      </ul> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div *ngIf = "myTeams.length < 1" class="alert alert-warning alert-no-teams"> 
        <h4 class ="noTeams">You haven't created any teams. Click Create a Team to get started. <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored btnWidth" routerLink="/create-team">Create a Team</button></h4> 
      </div> 
     </div> 
    </div> 
</div> 

<section> 
    <div class="mdl-card mdl-shadow--2dp teams-container-card" style="width:100%; padding-top:30px; padding-left:30px; padding-right:30px; background-color:#efefef;" *ngIf = "myTeams.length > 0"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-sm-12"> 
        <div class=" mdl-card-team demo-card-wide mdl-card mdl-shadow--2dp col-md-12" *ngFor = "let team of myTeams" style="width: 100%;"> 
         <div class="row"> 
          <div class="col-md-2 col-sm-12 text-center"> 
           <img src="images/logo.png" class="img-circle nimbleIcon"> 
          </div> 
          <div class="col-md-8 col-sm-12 myTeamsCont" style="padding-top:40px; padding-bottom:25px; padding-left: 30px;"> 
           {{team.name}} 
          </div> 
          <div class="col-md-2 col-sm-12"> 
           <div class="button-load" routerLink="/dashboard">Load</div> 
           <div class="button-remove" (click) = "deleteTeam(team)" ngIf="deleteSucess">Remove</div> 

          </div> 
         </div> 
        </div> 
       </div> 
      </div>  
     </div> 
    </div> 
</section> 

app.comonent.ts

import { OnInit, Component } from '@angular/core'; 

@Component({ 
selector: 'myteams-component', 
templateUrl: 'myteams.component.html', 
styleUrls: [ 'myteams.component.css' , 'progress.css' ] 
}) 

export class MyTeamsComponent { 
title = "My Teams"; 
myTeams = [ ]; 

ngOnInit() { 
    this.loadTeams(); 
} 

loadTeams() {  
    var myTeams = new Array(); 
    var i =0; 
    if(localStorage.getItem("storedTeams")){   
     this.myTeams = JSON.parse(localStorage.getItem("storedTeams")); 
    } 
} 

deleteTeam(team){ 
    var teams = this.myTeams; 
    var length = teams.length; 
    var i;  
    var indexObj; 
    var index; 

    for(i = 0; i < length; i ++){ 
     if(team.name===teams[i].name){ 
      console.log(team.name); 
      indexObj = teams[i]; 
      index = teams.indexOf(indexObj); 
      teams.splice(index, 1); 
      localStorage.setItem("storedTeams", JSON.stringify(teams)); 
     } 
    } 
} 

}

Answer 1

您可以使用basic基本需求的JavaScript警報。

alert（「Success，team deleted」）;

也可以使用確認對話框看到https://www.w3schools.com/js/js_popup.asp

在你的情況下，將具有以下

deleteTeam(team){ 
var teams = this.myTeams; 
var length = teams.length; 
var i;  
var indexObj; 
var index; 

for(i = 0; i < length; i ++){ 
    if(team.name===teams[i].name){ 
     console.log(team.name); 
     indexObj = teams[i]; 
     index = teams.indexOf(indexObj); 
     teams.splice(index, 1); 
     localStorage.setItem("storedTeams", JSON.stringify(teams)); 

     alert("Success! Team deleted"); 
    } 
} 

Answer 2

使用PrimeNg你可以給成功的消息。

在模塊

import {MessagesModule} from 'primeng/primeng'; 

在HTML

<p-messages [value]="msgs"></p-messages> 

<div> 
<button type="button" pButton (click)="showSuccess()" label="Success" class="ui-button-success"> 
</button> 
<button type="button" pButton (click)="clear()" icon="fa-close" style="float:right" label="Clear"> 
</button> 
</div> 

在部件

export class MessagesDemo { 

msgs: Message[] = []; 

showSuccess() { 
    this.msgs = []; 
    this.msgs.push({severity:'info', summary:'Info Message', detail:'PrimeNG rocks'}); 
} 


clear() { 
    this.msgs = []; 
} 

}

更多信息，請reffer this primeng link here