我的代碼作業到此為止，但現在我希望當我再次按下按鈕時新的時間戳出現在串列中。 （例如 10:01、10:02、10:03 等。）目前，它添加了相同的舊原始時間戳（例如，10:00、10:00、10:00 等，這是我不做的不想）。
我還希望樣式規則（ngStyle 和 ngClass）僅在用戶按下按鈕 5 次后生效。
非常感謝提前！
HTML
<section>
<button (click)="toogleTag()"> Push me </button>
<p *ngIf="showMe"> Some random text </p>
<div *ngFor="let click of listOfClicks">
<div [ngStyle]="{'background-color':'black'}">
<p [ngClass]="{'text-white': true}">
{{ Date1 }}
</p>
</div>
</div>
</section>
組件.ts
import { Component, OnInit } from '@angular/core';
export class DisplayDetailsComponent implements OnInit {
numberOfClicks: number = 0;
listOfClicks: any = [];
showMe:boolean=false
ngOnInit() {}
toogleTag() {
this.showMe=!this.showMe;
this.numberOfClicks ;
this.listOfClicks.push(this.numberOfClicks);
}
constructor() { }
Date1 : Date = new Date();
}
uj5u.com熱心網友回復：
您總是列印相同的日期，因為您總是系結到同一個變數。您可以擁有點擊串列來托管點擊日期。
<section>
<button (click)="toogleTag()">Push me</button>
<p *ngIf="showMe">Some random text</p>
<div *ngFor="let date of listOfClicks">
<div [ngStyle]="listOfClicks?.length >= 5 && { 'background-color': 'black' }">
<p [ngClass]="listOfClicks?.length >= 5 && { 'text-white': true }">
{{ date }}
</p>
</div>
</div>
</section>
showMe = false;
numberOfClicks = 0;
listOfClicks: Date[] = [];
toogleTag() {
this.showMe = !this.showMe;
this.numberOfClicks ;
this.listOfClicks.push(new Date());
}
提示：如果可能，我會避免同時使用 ngStyle 和 ngClass，嘗試將它們組合到其中之一中，例如擁有 2 個類、1 個類或使用這兩個屬性。
uj5u.com熱心網友回復：
這是一個例子：https ://stackblitz.com/edit/plain-angular6-2zqzeh
我添加了 hh:mm:ss 格式，以便您可以測驗邏輯是否正常作業，如果您愿意，您可以洗掉處理秒數的部分。
基本上，添加了一個新的陣列和方法來將 hh:mm:ss 字串推送給它，同時通過格式化程式方法推送 Date。
toogleTag() {
this.showMe = !this.showMe;
this.numberOfClicks ;
this.listOfClicks.push(this.numberOfClicks);
this.getTime();
}
formatTime(time) {
if (time < 10) return time = '0' time;
else return time;
}
getTime() {
let today = new Date();
let h = this.formatTime(today.getHours());
let m = this.formatTime(today.getMinutes());
let s = this.formatTime(today.getSeconds());
this.listOfTimes.push(h ':' m ':' s);
}
和模板：
<div *ngFor="let time of listOfTimes">
{{ time }}
</div>
（css等細節省略）
我還記得你的代碼:)（點擊次數串列（Angular））
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/413244.html
標籤：
上一篇：JSON中的意外令牌e在位置0Angular12.Net5
下一篇：路由引數-訂閱方法