在確認刪除警告框中的angular2後刪除html div

我有一個簡單地顯示我的模型列表的代碼。在這裏你會看到一個div被重複添加，直到顯示我的所有評論。在每個div內都有一個按鈕，顯示離子彈出窗口，讓用戶可以選擇編輯或刪除評論。在確認刪除警告框中的angular2後刪除html div

<div *ngFor="let comment_details of comments"> 
    <div id="content-wrap"> 
     <div class="col-md-6 col-bordered"> 
      <button icon-only (click)="presentPopover(comment_details.id) style="float: right;"> 
        <ion-icon name="more"></ion-icon> 
      </button> 

     <div class="row1"> 
      @{{comment_details.author_name}} 
     </div> 
     <div class="row2"> 
        {{comment_details.content.rendered}} 
     </div> 
     </div> 
    </div> 
</div>

彈出窗口有一個單獨的類。當你選擇刪除選項時，如果你想刪除評論，會彈出一個提示框並要求確認。

@Component({ 
    template: ` 
    <ion-list> 
     <button ion-item (click)="close()">Edit</button> 
     <button ion-item (click)="delete()">Delete</button> 
    </ion-list> 
    ` 
}) 

export class PopoverPage{ 
    id: number; 
    constructor(public viewCtrl: ViewController, public navParams: NavParams, private alertCtrl: AlertController, public comment: Comment) { 
     this.id = navParams.get('id'); 
} 

delete(){  
    let alert = this.alertCtrl.create({ 
    title: 'Confirm deletion', 
    message: 'Do you delete this' + this.id + ' comment?', 
    buttons: [ 
    { 
     text: 'delete', 
     handler:() => { 
     this.comment.deleteComment(this.id).map(res => res.json()) 
     .subscribe(data => {   
       let alert = this.alertCtrl.create({ 
       title: 'Comment deleted', 
       subTitle: 'Comment' + this.id + 'deleted', 
       buttons: ['Okay'] 
      }); 
      alert.present(); 
     }); 
     } 
    } 
    ] 
}); 
alert.present(); 
this.viewCtrl.dismiss(); 
    } 
}

後，我確認我要刪除一條評論，在不同的I類拼接評論陣列，這樣的評論會從陣列中刪除，並沒有任何問題有..現在我想未來在html中刪除的註釋div將被刪除。這怎麼能實現？

PS。我願意改變div列表，如果有幫助..

來源

2017-09-27 Domy

我認爲你不應該使用彈出窗口。只需使用[alert]（https://ionicframework.com/docs/components/#alert）。處理起來更容易。 – Duannx

我需要popover刪除和編輯選項:( – Domy

Ofcourse你可以有兩個按鈕與警報。請參閱上面的鏈接 – Duannx

嘗試開發更多與角控制結構。例如，您可以觸發必須刪除或由* ngIf操縱的標籤！例如，只需設置一個布爾變量，如：PressedDelete：boolean;然後在您的template.html中將您希望的標籤與* ngIf = PressedDelete連接起來。在這裏它的意思是例如：如果PressedDelete == true，比在我的頁面中呈現這個標籤，否則刪除它！這是客戶端，你可以玩這麼簡單。

我recommandation：

<div id="CommentToBeDeleted" *ngIf="PressedDelete" ></div>

現在你可以CONTROLL呈現在你的Page.Component.ts文件。

希望它有幫助

來源

2017-09-27 02:54:01 Rebar

在確認刪除警告框中的angular2後刪除html div

回答

相關問題