Angular 没有将 Oracle 中的数据加载到 HTML 中

Question

我正在尝试使用本地 Oracle 数据库中的数据填充表。数据库在 TypeScript 中正确加载，并且提供数据，但不显示在 HTML 中。 代码：

app.component.ts

import { CommonModule } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { runQuery } from './database';
import { ActivatedRoute, Router } from '@angular/router';

export interface Product {
  ID: number;
  NAME: string;
  DESCRIPTION: string;
  PRICE: number;
  CATEGORY: string;
}

@Component({
  imports: [CommonModule],
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true 
})


export class AppComponent implements OnInit {
  title = 'proyecto';
  data: Product[] = [];
  loading: boolean = true;


    ngOnInit() {
      this.loadData();
    }
    constructor(private router: Router, private route: ActivatedRoute) {}

  
    async loadData() {
      try {
        const result = await runQuery();
        if (result !== undefined) {
          console.log(result);
          this.data = result;
          this.loading = false;
        } else {
          console.error('Error');
        }
      } catch (error) {
        console.error( error);
      }
    }
  }
  

app.component.html

<h1>Database Oracle</h1>

<table >
  <thead>
    <tr>
      <th>ID</th>
      <th>NAME</th>
      <th>DESCRIPTION</th>
      <th>PRICE</th>
      <th>CATEGORY</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let product of data">
      <td>{{ product.ID }}</td>
      <td>{{ product.NAME }}</td>
      <td>{{ product.DESCRIPTION }}</td>
      <td>{{ product.PRICE }}</td>
      <td>{{ product.CATEGORY }}</td>
    </tr>
  </tbody>
</table>

//数据库.ts

import { connectToDatabase } from './conexion';
import { Product } from './app.component'; 

export async function runQuery(): Promise<Product[]> {
  let connection;

  try {
    connection = await connectToDatabase();

    const result = await connection.execute(
      `SELECT * FROM PRODUCTOS`
    );

    console.log(result.rows);
    return result.rows as Product[];
  } catch (error) {
    console.error('Error al ejecutar la consulta:', error);
    throw error;
  } finally {
    if (connection) {
      try {
        await connection.close();
      } catch (error) {
        console.error('Error al cerrar la conexión:', error);
      }
    }
  }
}

// conexion.ts

import oracledb from 'oracledb';

const dbConfig: oracledb.ConnectionAttributes = {
  user: 'SYSTEM',
  password: 'ToorDam2',
  connectString: 'localhost:1521/XE' 
};

export async function connectToDatabase() {

  try {
    const connection = await oracledb.getConnection(dbConfig);
    console.log('Connected');
    return connection;
  } catch (error) {
    console.error('Error :', error);
    throw error;
  }
}

问题：Oracle 数据库中的数据未在 HTML 中加载/显示
数据加载在 AppComponent 中，但不会出现在 HTML 中。难道 HTML 是在 AppComponent 之前渲染的吗？有什么解决办法吗？ 我没有错误 只是这个： browser-external:util:9 模块“util”已外部化以实现浏览器兼容性。无法访问客户端代码中的“util.inspect”

但我不认为是这样 谢谢

Answer 1

嘿，我没有足够的声誉来发表评论来提出其他问题，所以我必须将其写为答案，一旦您回答，我将更新此内容。 您使用的是哪个版本的角度？ 这是相关的，因为看起来您没有创建任何

Observables

或

Signals

来发出

data

已从

[]

更新为

[data from oracle]

。 Angular 严重依赖于

Behavior Subject

模式。

发生的情况是，您正在使用空数组

data

初始化

[]

，因此 html 模板使用此初始值进行渲染。您在组件渲染后加载数据，这就是它不更新的原因。如果您想更新这不会自动，您将需要发出已发生的更改。通过创建一个可观察的或一个信号来实现这一点。

如果您使用 Angular 17+，那么您可以使用

Signals

来更新变量，如下所示：

从 Angular Core 导入信号

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

然后像这样更新值：

export class AppComponent implements OnInit {
  title = 'proyecto';
  data: Product[] = signal([]);
  loading: boolean = signal(true);


    ngOnInit() {
      this.loadData();
    }
    constructor(private router: Router, private route: ActivatedRoute) {}

  
    async loadData() {
      try {
        const result = await runQuery();
        if (result !== undefined) {
          console.log(result);
          this.data.set(result);
          this.loading.set(false);
        } else {
          console.error('Error');
        }
      } catch (error) {
        console.error( error);
      }
    }
  }

并且在您的 html 模板上，您只需调用信号即可获取其当前值，每当

loading

或

data

发生变化时，它将自动更新。

<h1>Database Oracle</h1>

<table >
  <thead>
    <tr>
      <th>ID</th>
      <th>NAME</th>
      <th>DESCRIPTION</th>
      <th>PRICE</th>
      <th>CATEGORY</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let product of data()">
      <td>{{ product.ID }}</td>
      <td>{{ product.NAME }}</td>
      <td>{{ product.DESCRIPTION }}</td>
      <td>{{ product.PRICE }}</td>
      <td>{{ product.CATEGORY }}</td>
    </tr>
  </tbody>
</table>

如果您使用 Angular 17 或更低版本，这将不起作用，因为您无法访问信号。让我知道，我将更新答案以使用 Observables，这是旧的做事方式。 您可以在这里了解有关角度信号的更多信息：https://angular.io/guide/signals