使用 angular 7 处理 ul 菜单

Question

我正在处理 angular 7 个项目，并且有从服务器端动态填充的 ul 列表。

我得到了物品没问题我的问题是我需要关闭 ul 物品并在 4 里物品后重新打开它。

如何使用下一个示例在 angular 中做到这一点？

<ul class="col-12 col-md-4 col-sm-6 list-unstyled">

  <li *ngFor="let footerPage of footerExtraPages; let i = index+1"><a routerLink="page/{{footerPage.id}}/{{footerPage.slug}}">{{footerPage.title}}</a></li>

</ul>

Answer 1

我想有几种方法可以解决这个问题

一种方法是编写 getter 以获得元素：

html

  <li *ngFor="let footerPage of getFirstFour()">
    <a routerLink="page/{{footerPage.id}}/{{footerPage.slug}}"> 
      {{footerPage.title}}
    </a>
  </li>

ts

public function getFirstFour() {
  return this.footerExtraPages.map((item, i) => {
    if (i <= 4) { 
      return item;
    }
  })
}

然后创建一个新的 ul 以获取相应的其余部分

为了避免不得不依赖模板中的索引 (let i = index+1)，您也可以使用一个函数使索引保持一致：

public function getFirstFour() {
  return this.footerExtraPages.map((item, i) => {
    if (i <= 4) { 
      return { index: index + 1, ...item};
    }
  })
}

public function getRest() {
  return this.footerExtraPages.map((item, i) => {
    if (i > 4) { 
      return { index: index + 1, ...item};
    }
  })
}

请注意，如果项目对象附加了一个 ID，上面的代码可能会导致错误，如果您删除扩展运算符，您将能够保留两者，但也意味着您将不得不改造模板更深入。

Answer 2

在组件中，您必须将原始数组拆分为多个数组像这个例子

    while (this.footerPages.length > 0){
      this.footerExtraPages.push(this.footerPages.splice(0, 4));
    }

然后就可以很方便的显示在html模板中了

<ul *ngFor="let footerPages of footerExtraPages;let i = index" class="col-12 col-md-4 col-sm-6 list-unstyled">
    <li *ngFor="let footerPage of footerPages;let i = index"  >
      <a routerLink="page/{{footerPage.id}}/{{footerPage.slug}}">{{footerPage.title}}</a>  
    </li>
  </ul>

使用 angular 7 处理 ul 菜单

Handle ul menu with angular 7

angular

angular7