在确认删除警告框中的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

回答

相关问题