Разбор JSON в HTML

Question

написание сервиса, который возвращает массив значений JSON. На стороне получателя службы массив обхода обрабатывается с использованием * ngFor. Каждый JSON извлекается, но я не могу разобрать каждое значение внутри JSON. Я пытаюсь составить список ссылок. Содержимое Json - это имя ссылки и маршрут, по которому должна быть перенаправлена ​​ссылка.

попытался получить доступ к значениям внутри JSON, используя канал KeyValue. попробовал сделать кастомную трубу. попытался вызвать значение как "{{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;
    }
}

Это угловой компонент, который получает услугу.

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

---

HTML-код с * ngFor

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

список ссылок с указанным именем. как страница со всеми продуктами на сайте покупок.

Answer 1

Я исправил проблему, используя класс LinkDirectory вместо интерфейса, и удалил весь интерфейс из микса.