如何使用*ngIf条件在angular中显示默认空值按钮*ngFor循环中的like，dislike和default按钮使用Mysql Node.js

<button *ngIf="!showButtons" (click)="showButtons = true">默认空值按钮</button>

<div *ngIf="showButtons">
  <button *ngFor="let button of buttons" (click)="handleButtonClick(button)">{{ button }}</button>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-button-component',
  templateUrl: './button.component.html',
  styleUrls: ['./button.component.css']
})
export class ButtonComponent {
  showButtons: boolean = false;
  buttons: string[] = ['like', 'dislike', 'default'];

  handleButtonClick(button: string) {
    // 处理按钮点击事件
    console.log(button);
  }
}

const mysql = require('mysql');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'username',
  password: 'password',
  database: 'database_name'
});

connection.connect();

// 处理按钮点击事件的后端逻辑
function handleButtonClick(button) {
  // 执行相应的数据库操作
  // ...
}

// 导出模块
module.exports = {
  handleButtonClick
};

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

handleButtonClick(button: string) {
  this.http.post('/api/buttonClick', { button }).subscribe(response => {
    console.log(response);
  });
}

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const { handleButtonClick } = require('./buttonController');

app.use(bodyParser.json());

// 处理按钮点击事件的API路由
app.post('/api/buttonClick', (req, res) => {
  const button = req.body.button;
  handleButtonClick(button);
  res.send('Button click handled');
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});