HTML 中的 JSON 解析答案

【问题标题】：JSON Parsing in HTMLHTML 中的 JSON 解析
【发布时间】：2019-04-19 07:47:51
【问题描述】：

编写一个返回 JSON 值数组的服务。在服务接收者端，使用 *ngFor 处理遍历数组。每个 JSON 都被检索，但我无法解析 JSON 中的每个值。我正在尝试制作链接列表，Json 内容是链接的名称和链接应该路由到的路由。

确实尝试使用 KeyValue 管道访问 JSON 中的值。确实尝试制作自定义管道。确实尝试调用像“{{obj.Name}} {{obj.Route}}”这样的值其中obj是json对象。

这是 JSON 数组的结构。

const LinkDirectory: ILinks[] =
[
{Name: 'Home', Route: '/home'},
{Name: 'Aboutus', Route: '/Aboutus'},
];

ILinks 是一个接口

export interface ILinks {
    Name: string;
    Route: string;
}

返回目录的 Angular 服务。

@Injectable()
export class Directory{
    getLinks(): ILinks[]{
        return LinkDirectory;
    }
}

这是接收服务的 Angular 组件。

export class LinksPopulate implements OnInit {
  LinkDirectory: ILinks[];
  constructor(private DirRetriver: Directory) {}
  ngOnInit(): void {
    this.LinkDirectory = this.DirRetriver.getLinks();
  }
}

带有 *ngFor 的 HTML 代码

<div>
      <ul>
      <li *ngFor="let link of LinkDirectory">
      <a routerLink={{link.Route}}>{{link.Name}}</a>
      </li>
      </ul>
</div>

具有指定名称的链接列表。就像购物网站中的所有产品页面一样。

【问题讨论】：

你得到了什么结果？
请向我们提供实际的 JSON 数据而不是格式。并且必须尝试JSON.parse()在存储之前解析返回的数据？
正如我在您的代码中看到的那样，您定义了const LinkDirectory，您是在函数中定义该变量吗？您在 *ngFor 中使用的变量必须声明为实例字段（组件变量）。分享更多关于如何检索 *ngFor 数据的代码，您的 HTML 语法看起来不错。
@porgo 我想用链接列表填充页面。 LinkDirectory 将在添加页面和路由后立即更新。我想要的结果是一个带有链接列表的页面。考虑一个以产品为导向的公司的产品展示网站，每个产品都有一个页面。有一个查看所有产品列表的链接，该列表包含可点击的产品名称，点击后将进入产品页面。我正在尝试实现将列出所有产品的页面。
@Dblaze47 请原谅我，但实际的 JSON 文件是什么意思。我还没厌倦解析它

标签： javascript html arrays json angular

【解决方案1】：

我通过使用类 LinkDirectory 而不是接口解决了这个问题，并从组合中删除了整个接口。

【讨论】：