在 Twitter 按钮图标旁边显示喜欢的数量

Question

使用 Angular 框架。我在浏览器中显示了一个模拟 Twitter 按钮的按钮。现在我的点赞数在点击时增加到 1，而在未点击时又回到 0。然而，喜欢的数量正在控制台中显示。我想将其显示在按钮本身旁边，这是否是将数据传递给事件问题或 ngContent？前两个片段是 app.component.html 和 app.component.ts，后两个片段是 like.component.html 和 like.component.ts。<like [isActive]="tweet.isLiked" [likesAmount] = "tweet.likesCount"(change)="tweet.onFavoriteChange()"></like>import { Component } from '@angular/core';@Component({  selector: 'app-root',  templateUrl: './app.component.html',  styleUrls: ['./app.component.css']})export class AppComponent {  title = 'twitterButton';    //Tweet object  tweet = {    body: 'Here is the body of a tweet...',    isLiked: false,    likesCount: 0,    onFavoriteChange(){}  }}<span class="glyphicon" [class.glyphicon-heart-empty] = "!isActive" [class.glyphicon-heart]="isActive" (click)="changeFavorite()"></span>import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';@Component({  selector: 'like',  templateUrl: './like.component.html',  styleUrls: ['./like.component.css']})export class LikeComponent {  @Input() likesAmount: number; //Total number of likes  @Input() isActive: boolean; //User has liked tweet or not  @Output() change = new EventEmitter();    changeFavorite(){    this.isActive = !this.isActive;    this.change.emit();    if(this.isActive){          this.likesAmount++;          console.log(this.likesAmount);        }else{          this.likesAmount--;          console.log(this.likesAmount);        }     }}

Answer 1

您可以使用{{}}-brackets 显示喜欢的数量，它应该会自动更新。这称为插值，是 Angular 的核心功能之一。

{{likesAmount}}
<span class="glyphicon" 
    [class.glyphicon-heart-empty]="!isActive" 
    [class.glyphicon-heart]="isActive"
    (click)="changeFavorite()"></span>