使用 ngFor 时 Bootstrap navbar-nav 的问题

Question

您好，我正在使用 bootstrap v4.0.0。使用 navbar-nav 和 ngFor 显示菜单时，绑定属性一直被调用 - 这是预期的行为吗？

HTML 代码片段：

<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 代码片段：

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;
  }

始终调用获取 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 将接受该更改。

使用 ngFor 时 Bootstrap navbar-nav 的问题

Issues with Bootstrap navbar-nav when using ngFor

navbar

bootstrap-4

ngfor

angular