亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 Twitter 按鈕圖標旁邊顯示喜歡的數量

在 Twitter 按鈕圖標旁邊顯示喜歡的數量

瀟湘沐 2023-08-10 15:57:40
使用 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);        }     }}
查看完整描述

1 回答

?
慕森卡

TA貢獻1806條經驗 獲得超8個贊

您可以使用{{}}-brackets 顯示喜歡的數量,它應該會自動更新。這稱為插值,是 Angular 的核心功能之一。

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


查看完整回答
反對 回復 2023-08-10
  • 1 回答
  • 0 關注
  • 141 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號