在 Angular 中从 Json 文件显示数据

在本节中，我们将学习使用 angular 7/8/9，以便我们可以显示来自 Json 文件的数据。此外，我们将了解如何在 angular 9 中读取 json 文件。在下面的示例中，我们使用 angular 8 在 html 表中显示 json 数据。我们将使用 angular 生成 json 文件。然后，我们将使用创建的 json 文件来显示数据。因此，我们将使用 angular 应用程序读取 json 文件数据。

假设我们需要使用 json 文件来显示前端所需的數據，并且想要以表格形式显示。在这种情况下，我们将使用 ngfor 指令，该指令用于以表格形式显示数据。在我们的例子中，我们还需要在 angular 应用程序中显示数据。所以我们将使用 bootstrap。如果我們使用的 angular 版本是 6、7、8、9、10 和 11，我们就可以轻松地显示 json 文件中的数据。为了创建 json 文件，我们将遵循一些逐步的过程，描述如下

步骤 1：创建新应用程序

在此步骤中，我们将在终端或命令提示符中使用以下命令来创建我们的 angular 应用程序。

步骤 2：创建 JSON 文件

在此步骤中，我们将添加一些学生的记录。

src/app/students.json

步骤 3：更新 Ts 文件

在此步骤中，我们将使用 Student 接口来创建学生对象数组。为此，我们将使用以下文件代码

src/app/app.component.ts

步骤 4：模板代码

在此部分中，我们将使用 ngfor 指令来显示学生对象数组变量数据。在下面的示例中，将使用一个 bootstrap 类。

src/app/app.component.html

现在上面的代码已经准备好运行了。我们将使用以下命令来运行我们的应用程序

执行上述命令后，我们将看到以下输出