如何读取静态 json 并在 Angular 中填充评论部分？答案

【问题标题】：How to read a static json and populate a comment section in Angular?如何读取静态 json 并在 Angular 中填充评论部分？
【发布时间】：2021-01-08 15:03:47
【问题描述】：

我在 assets 文件夹中创建了一个 json 文件。下面是json

    [
    {
        "userEmail": "IronMan@in.com",
        "comment": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat metus at mauris sagittis interdum adipiscing placerat metus.",
        "commentDate": "08-01-2021 06:17:20 PM"
    },
    {
        "userEmail": "CaptainAmerica@in.com",
        "comment": "lLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat metus at mauris sagittis interdum. Cras lacinia posuere egestas.",
        "commentDate": "08-01-2021 06:17:20 PM"
    }
]

我需要插入的 HTML 看起来像这样

<!-- new chat -->
            <div class="bx--col-lg-4 comment_section" style="position: fixed">
               <!-- <div class="check">
                  <strong>Start the discussion</strong>
               </div> -->
               <div class="test">
                  <strong>Start the discussion</strong><br>
                  <strong>Title</strong>
                  <p>More clarity is required on submitted evidence</p>
                  <div>
                     <strong>Adam's comment</strong> <br>
                     <label class="bx--label">10 March 2019</label>
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat metus at mauris
                        sagittis interdum adipiscing placerat metus.</p>
                  </div>
                  <div>
                     <div>
                        <img src="https://avatarfiles.alphacoders.com/139/139523.jpg" class="img-rounded-cust">
                        <label class="bx--label">Time open: 1 day 3 hr 2 mins <br>
                           Last updated: 8 Oct 2018 7:29 PM</label>
                        <!-- <label class="bx--label">Last Updated</label> -->
                     </div>

                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat metus at mauris
                        sagittis interdum adipiscing placerat metus.</p>
                  </div>
                  <div>
                     <div>
                        <img src="https://avatarfiles.alphacoders.com/221/221555.jpg" class="img-rounded-cust">
                        <label class="bx--label">Time open: 1 day 3 hr 2 mins <br>
                           Last updated: 8 Oct 2018 7:29 PM</label>
                        <!-- <label class="bx--label">Last Updated</label> -->
                     </div>

                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat metus at mauris
                        sagittis interdum.</p>
                  </div>
                  <i-label class="bx--form-item"><label class="bx--label" for="i-label-3"
                        style="font-weight: 600 !important;"> Your Comment
                     </label>
                     <div class="bx--text-area__wrapper">
                        <!----><textarea aria-label="textarea" itextarea="" placeholder="Write your comments here"
                           rows="4" cols="50" class="bx--text-area" id="i-label-3"></textarea></div>



                  </i-label>
                  <br>
                  <button class="bx--btn bx--btn--primary" style="left: 60%;">Submit</button>
               </div>
            </div>

            <!-- new chat ends -->

我是 Angular 的新手，有人可以通过展示如何在服务中调用此 json 并填充 HTML 来解释我。此外，该服务是位于该组件中还是位于应用程序文件夹中的任何位置。

【问题讨论】：

您正在寻找ngFor 指令。将您的 JSON 数据解析为对象数组并将列表绑定到模板元素。
不，我只想通过 json 填充 HTML，而不是使用我用 HTML 编写的文本。
Angular 执行此操作的方法是使用 ngFor 指令将模板绑定到您的数据。如果您不想在模板中添加任何额外的 HTML，则必须在代码隐藏中动态创建节点并将它们插入到组件的模板中。
您能否通过 stackblitz.com 向我展示它是否适合您，这对我的学习很有帮助。真的很感激
这里有一个demo 使用ngFor 指令将您的数据绑定到模板。相关代码在app.component.ts 和app.component.html。这不包括从服务/API 调用中检索数据。

标签： json angular service angular-material static-data

【解决方案1】：

应用组件.ts

import { Component, VERSION, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent implements OnInit  {

  data: Array<any>;

  ngOnInit(): void {

// This simulates fetching and parsing your JSON data
// from a service call. You will need to implement that
// yourself.
this.data = [
  {
    "userEmail": "IronMan@in.com",
    "comment": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat metus at mauris sagittis interdum adipiscing placerat metus.",
    "commentDate": "08-01-2021 06:17:20 PM"
  },
  {
    "userEmail": "CaptainAmerica@in.com",
    "comment": "lLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent placerat metus at mauris sagittis interdum. Cras lacinia posuere egestas.",
    "commentDate": "08-01-2021 06:17:20 PM"
  }
];

} }

应用组件.html

<!-- This template uses the ngFor directive to create
 a comment for each element in your array. -->
<div *ngFor="let d of data" style="padding: 8px;">
  {{d.comment}}
  <br><span style="font-size: 12px; font-weight: bold;">{{d.userEmail}}</span>
  <br><span style="font-size: 10px;">{{d.commentDate}}</span>
</div>

【讨论】：