У меня есть сервис, он генерирует панель инструментов, есть несколько классов

Question

меню класса

import { QueryParam } from "./query-param";
import { QueryRouterLink } from "./query-router-link";


export class Menu {
  link: string;
  name: string;
  queryParam: QueryParam[];
  queryRouterLink?: QueryRouterLink;
}

класс QueryParam

export class QueryParam {
  name: string;
  value: string;
}

класс QueryRouterLink

export class QueryRouterLink {
  [name: string]: string;
}

мой сервис

import { Injectable } from "@angular/core";
import { Menu } from "../classes/menu";
import { QueryParam } from "../classes/query-param";
import { QueryRouterLink } from "../classes/query-router-link";

@Injectable({
  providedIn: "root",
})
export class LinksService {
  constructor() {}

  queryRouterLink: QueryRouterLink;

  autoMenu() {
    let myMenu: Menu[] = [
      {
        link: `/componentOne`,
        name: "ComponentOne",
        queryParam: [{ name: "resource", value: "ComponentOne" }],
      },
      {
        link: `/componentTwo`,
        name: "ComponentTwo",
        queryParam: [{ name: "resource", value: "ComponentTwo" }],
      },
    ];

    for (let menuItem of myMenu) {
      menuItem.queryRouterLink = this.getCorrectQueryParam(
        menuItem.queryParam as QueryParam[]
      );
    }

    return myMenu;
  }

  getCorrectQueryParam(queryParam: QueryParam[]) {
    for (let param of queryParam) {
      this.queryRouterLink[param.name] = param.value;
    }
    return this.queryRouterLink;
  }
}

getCorrectQueryParam конвертировать мой queryParam [имя: 'ресурс', значение: "ComponentTwo"] для обычного QueryParams [имя: строка]: строка; ошибка в консоли: Невозможно установить свойство 'ресурс' из неопределенного. это значит, что имя не определено? Или моя функция работает неправильно?

мое приложение. html

  <mat-toolbar>
      <h1
        *ngFor="let item of menu"
        [routerLink]="item.link"
        [queryParams]="item.queryRouterLink"
      >
        {{ item.name }}
      </h1>
    </mat-toolbar>
    <router-outlet></router-outlet>

мое приложение.ts

import { Component, OnInit } from "@angular/core";
import { LinksService } from "./services/links.service";
import { Menu } from "./classes/menu";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
})
export class AppComponent implements OnInit {
  title = "training";
  menu: Menu[];

  constructor(private linkS: LinksService) {}

  ngOnInit() {
    this.menu = this.linkS.autoMenu();
  }
}

Answer 1

Итак, ответ:

import { Injectable } from "@angular/core";
import { Menu } from "../classes/menu";
import { QueryParam } from "../classes/query-param";
import { QueryRouterLink } from "../classes/query-router-link";

@Injectable({
  providedIn: "root",
})
export class LinksService {
  constructor() {}

  queryRouterLink: QueryRouterLink;  <===== wrong

  autoMenu() {
    let myMenu: Menu[] = [
      {
        link: `/componentOne`,
        name: "ComponentOne",
        queryParam: [{ name: "resource", value: "ComponentOne" }],
      },
      {
        link: `/componentTwo`,
        name: "ComponentTwo",
        queryParam: [{ name: "resource", value: "ComponentTwo" }],
      },
    ];

    for (let menuItem of myMenu) {
      menuItem.queryRouterLink = this.getCorrectQueryParam(
        menuItem.queryParam as QueryParam[]
      );
    }

    return myMenu;
  }

  getCorrectQueryParam(queryParam: QueryParam[]) {
    let queryRouterLink: QueryRouterLink = {}; <====correct 
    for (let param of queryParam) {
      this.queryRouterLink[param.name] = param.value;
    }
    return this.queryRouterLink;
  }
}