Ручка уль меню с угловым 7

Question

Привет всем, над кем я работаю над проектом angular 7

У меня есть список ul, который динамически заполняется со стороны сервера

У меня нет проблем, моя проблема в том, что мне нужно закрытьul item и снова откройте его после 4 li, как я могу сделать это в угловом формате, используя следующий пример?спасибо, я заранее, ребята ..

<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

в компоненте вам нужно разделить исходный массив на несколько массивов, как в этом примере

    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>

спасибо всем

Answer 2

Я думаю, есть несколько способов сделать это

Один из них - написать геттер, чтобы получить элементы:

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

имейте в виду, что если к объекту предмета прикреплен идентификатор, приведенный выше код может вызвать ошибки, если вы удалите оператор распространения, вы сможетечтобы сохранить оба, но это также означало бы, что вам придется переделывать шаблон, чтобы идти на уровень глубже.