Angular中切换显示按钮click()失效，点击无日志输出问题求助

我帮你找出了代码里的两个关键问题，修复后就能正常显示日志条目了：

1. TypeScript类属性语法错误 #

在server.component.ts里，paragraphName的声明有语法问题，你缺少了类型注解和赋值的正确写法：

// 错误写法
paragraphName : 'Paragraph01';

// 正确写法（添加类型声明和赋值运算符）
paragraphName: string = 'Paragraph01';

这个错误会导致组件编译失败，进而影响整个组件的功能，包括按钮点击事件的执行。

2. Angular模板*ngFor关键字大小写错误 #

在server.component.html的循环指令里，Let必须是小写的let，Angular模板语法对关键字大小写是严格要求的：

<!-- 错误写法 -->
<div *ngFor = "Let logItem of log ">{{ logItem }}</div>

<!-- 正确写法 -->
<div *ngFor="let logItem of log">{{ logItem }}</div>

大写的Let会被Angular当成普通变量，而不是循环迭代的关键字，所以循环不会渲染任何内容。

修复后的完整代码 #

server.component.ts #

import { Component } from '@angular/core';
@Component({
 selector: 'app-server',
 templateUrl: './server.component.html',
 styles : [ `.online {color : white; }`]
})
export class ServerComponent {
 serverId : number= 10;
 serverStatus : string = 'offLine';
 paragraphName: string = 'Paragraph01'; // 修复此处
 showSecret = false;
 log = [];
 constructor(){
 this.serverStatus = Math.random() > 0.5 ? 'online' : 'offline';
 }
 getServerStatus(){
 return this.serverStatus;
 }
 getColor(){
 return this.serverStatus === 'online'? 'Green':'Red';
 }
 onToggleDisplay(){
 this.showSecret = !this.showSecret;
 this.log.push(this.log.length + 1);
 }
}

server.component.html #

<button class="btn btn-primary" (click)="onToggleDisplay()">Display Details</button>
<p *ngIf="showSecret">Secret Password = tuna</p>
<div *ngFor="let logItem of log">{{ logItem }}</div> <!-- 修复此处 -->

修复这两个问题后，点击"Display Details"按钮，就能看到日志条目逐一显示出来了。作为Angular新手，要特别注意TypeScript的语法规范和Angular模板的大小写要求哦😉

内容的提问来源于stack exchange，提问作者Su So