Bootstrap 成功消息 - Angular 2

Question

尝试在单击 "deleteTeam" 按钮时将成功 message/pop 添加到屏幕。 angular 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

您可以使用基本 javascript 警报来满足基本需求。

警报("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';

In 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 = [];
}

}

更多信息请参考 this primeng link here

Bootstrap 成功消息 - Angular 2

Bootstrap Success message - Angular 2

html

angular-ui-bootstrap

angular2-template