Angular中HttpClient.get数据正确赋值本地变量及菜单异常解决

你说得完全对，问题根源就是__values(data)的错误使用——这个是TypeScript内部的迭代器处理工具函数，根本不适合用来直接转换API返回的数组数据，才导致了后续的渲染异常。下面是一步步的修复方案：

1. 先修正MenuService的返回类型 #

你的API返回的是MenuItems对象组成的数组，但当前Service的get()方法声明返回的是单个MenuItems对象，类型不匹配会导致后续赋值逻辑出错。修改后的Service代码：

import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import { MenuItems} from "./models/menu-items";

@Injectable({
  providedIn: 'root'
})
export class MenuService {
  constructor(private _http : HttpClient) { }

  _url = "http://activity:8080/yardstickservice/rest/api/menu";

  public get() {
    // 把返回类型改为MenuItems数组，匹配API实际返回格式
    return this._http.get<MenuItems[]>(this._url);
  }
}

2. 修正Component中的数据赋值逻辑 #

直接将订阅到的API响应数据赋值给menuPoints即可，完全不需要__values。另外建议给menuPoints初始化一个空数组，避免模板在数据加载前出现空值报错：

import { Component, OnInit } from '@angular/core';
import { MenuService} from "../menu.service";
import {MenuItems} from "../models/menu-items";

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css']
})
export class MenuComponent implements OnInit {
  constructor(private _menu : MenuService) { }

  // 初始化空数组，防止模板渲染时的空值问题
  menuPoints : MenuItems[] = []; 
  brand :String = "YST Brand";

  ngOnInit() {
    this._menu.get()
      .subscribe(data => {
        console.log("data",data);
        // 直接赋值API返回的数组
        this.menuPoints = data; 
        console.log("menu",this.menuPoints);
      });
  }
}

3. 模板的小优化（可选但推荐） #

注意到你模板里有个拼写错误taxt-light，要改成text-light；另外可以用可选链操作符?.避免子菜单为空时的报错：

<div>
  <nav class="navbar navbar-expand-sm navbar-dark bg-primary text-light">
    <ul class="navbar-nav">
      <li class="nav-item dropdown" *ngFor="let item of menuPoints">
        <a *ngIf="item.childmenu?.length; else submenu" class="text-light nav-link dropdown-toggle" href="#" data-toggle="dropdown">
          {{item.itemtext}}
        </a>
        <ng-template #submenu>
          <a class="text-light nav-link" href="#">{{item.itemtext}}</a>
        </ng-template>
        <div *ngIf="item.childmenu?.length" class="dropdown-menu text-light bg-primary">
          <a *ngFor="let subitem of item.childmenu" class="dropdown-item text-light" href="#">{{subitem.itemtext}}</a>
        </div>
      </li>
    </ul>
  </nav>
</div>

为什么之前的__values会出问题？ #

__values是TypeScript内部用来处理可迭代对象的工具函数，它返回的是一个迭代器对象，而不是Angular*ngFor能识别的数组结构。这就导致模板无法正确遍历渲染，出现你看到的“未知数组”、点击后菜单消失的异常。

内容的提问来源于stack exchange，提问作者Uwe