使用 ngFor 时 Bootstrap navbar-nav 的问题

Question

您好，我正在使用引导程序 v4.0.0。使用 navbar-nav 和 ngFor 显示菜单时，始终调用绑定属性 - 这是预期的行为吗？

HTML 代码 sn-p:

<div class="collapse navbar-collapse" id="navbar-content">
    <div class="navbar-nav mr-auto">
      <ul class="navbar-nav">
        <ng-container *ngFor="let navItem of NavItems">          
          <li class="nav-item">
            <a class="nav-link" [routerLink]="[navItem.url]" routerLinkActive="active" [target]="navItem.isLink ? '_blank' : null">{{navItem.displayName}}</a>
          </li>
        </ng-container>
    </ul>
  </div>
</div>

component.ts 代码 sn-p:

private _navItems: object;
get NavItems() { // This API is called continuously even after the menu items are loaded
   if(!this._navItems){
    this._navItems=  [
      {
        "displayName": "TestApp",
        "url": "testApp",
        "isLink": false,
        "requiredRoles": [],
        "childNavs": []
      },
      {
        "displayName": "Custom Control",
        "url": "custom",
        "isLink": false,
        "requiredRoles": [],
        "childNavs": [
          {
            "displayName": "JQX Custom Grid",
            "url": "custom/grid",
            "isLink": true,
            "requiredRoles": []
          }
        ]
      }
    ];
   }
   return this._navItems;
  }

get NavItems 绑定一直被调用，即使没有任何变化。

• 这是预期行为吗？
• 有更好的方法吗？

谢谢，

RDV

Answer 1

要详细说明@penleychan 所说的，是的，这是预期的行为。任何绑定到模板中方法的值都会在每个更改检测周期调用该方法，以确保该值没有更改。

据我所知，您的 getter 方法本质上是静态的，因此您可以这样做：

private _navItems = 
[
      {
        "displayName": "TestApp",
        "url": "testApp",
        "isLink": false,
        "requiredRoles": [],
        "childNavs": []
      },
      {
        "displayName": "Custom Control",
        "url": "custom",
        "isLink": false,
        "requiredRoles": [],
        "childNavs": [
          {
            "displayName": "JQX Custom Grid",
            "url": "custom/grid",
            "isLink": true,
            "requiredRoles": []
          }
        ]
      }
];

public NavItems: object;

constructor() {
  this.NavItems = this._navItems;
}

如果您要更新 _navItems 的值，我建议您稍后再更新 NavItems，Angular 会接受该更改。