根据元素在特定组件中的存在来呈现元素

Question

我有这个可重用的组件：

      <h4>Our viewers reviews</h4>

      <ul class="list-group" style="color:black" >
        <div *ngIf="userReviews">
        <li class="list-group-item" *ngFor="let r of userReviews;let i=index">
         <p  class="font-weight-bold text-left">{{r.movie}}</p>
          <div class="img-wrapper">
          <img class="img-fluid" src="{{ r.poster }}" alt="{{ r.poster }}" />
        </div>
          <br>
          <p  class="font-weight-bold text-left"> {{r.review}}</p>
          <br>
          <span  class=" font-weight-bold text-left">by </span><span  class="font-italic">{{r.author}} </span>

          <button  style="float:right" (click)="delete()"  class="btn btn-danger">Delete</button>
        </li>
      </ul>
    </div>

我在home组件和admin组件中呈现此HTML但我只想显示此删除按钮

<button style="float:right" (click)="delete()" class="btn btn-danger">Delete</button>

在管理页面上。在主页上删除应该是不可见的。我认为在某些解决方案中，但似乎没有一个很好，并且将有重复的代码。

有人可以提出解决方案吗？

Answer 1

尝试：