Question

我有一个代码，只显示我的模型列表。在这里你看到一个div重复添加，直到我的所有评论都显示出来。每个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>

popover有一个单独的类。当您选择删除选项时，会弹出一个警告框，如果您要删除评论，则会要求确认。

@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();
  }
}

在我确认要删除注释后，在另一个类中我拼接了注释数组，以便注释将从数组中删除，并且那里没有问题。现在我想要的是接下来的是删除html中的注释div将被删除。如何实现这一目标？

PS。如果有帮助，我愿意将div改为列表..

Answer 1

尝试使用Angular控制结构进行更多开发。例如，您可以触发必须由 * ngIf 删除或操作的标签！例如，只需设置一个布尔变量，如： PressedDelete：boolean; 并将template.html中您希望的标签与 * ngIf = PressedDelete 连接起来。这意味着例如：如果PressedDelete == true，则在我的页面中呈现此标记，否则删除它！这是客户端，你可以用它来玩这么简单。

我的建议：

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

现在，您可以在 Page.Component.ts 文件中控制渲染。

希望有所帮助

在angular2

1 个答案: