[Angular] *ngIf syntx

转载于 2017-12-21 01:27:00 发布 · 50 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Answer1215/p/8076580.html

文章标签：

#javascript #ViewUI

本文介绍了一个使用Angular实现的用户资料展示组件，该组件能够显示用户的头像、用户名及关注者数量，并根据登录状态切换关注按钮的状态。文章还展示了如何通过*ngIf指令结合模板引用变量来动态渲染关注或取消关注按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div class="profile">
  <img [src]="user.img" width="50px">
  @{{user.username}} has <strong>{{followerCount}}</strong> followers
  <div *ngIf="isFollowing; then unfollowButton else followButton">
      button renders here
  </div>
</div>
<ng-template #followButton>
  <button class="button is-info" (click)="toggleFollow()">Follow</button>
</ng-template>
<ng-template #unfollowButton>
  <button class="button is-warning" (click)="toggleFollow()">Unfollow</button>
</ng-template>