HTML中的JSON解析

Question

编写返回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 Service。

@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>

具有指定名称的链接列表。例如购物网站中的“所有产品”页面。

Answer 1

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