Угловой цикл - * ngFor с индексом

Question

Я очень плохо знаком с Angular, и в настоящее время я изучаю Angular 6, последнюю версию Angular.

Здесь я пытаюсь оформить страницу моего блога, используя статьи, которые были получены сJSON и отображение их в 2 столбцах, как на рисунке ниже:

Число рядом с заголовком является индексом статьи в массиве статей.Легко увидеть проблему: индексы с 1 дублируются дважды.

Это мой код, пожалуйста, покажите мне, почему я не прав в деталях и как я могу это исправить.

BlogService:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class BlogService {

  constructor(private http: HttpClient) { }

  getArticleList() {
    return this.http.get('https://jsonplaceholder.typicode.com/posts');
  }
}

ArticleListComponent:

import {Component, OnInit} из '@ angular / core';import {BlogService} из '../blog.service';

@Component({
  selector: 'app-blog',
  templateUrl: './article-list.component.html',
  styleUrls: ['./article-list.component.css']
})
export class ArticleListComponent implements OnInit {
  articles: Object;

  constructor(private data: BlogService) { }

  ngOnInit() {
    this.data.getArticleList().subscribe(
      data => this.articles = data
    );
  }
}

HTML-файл:

<div class="article-list-page">
    <div class="container">
      <h3>This is blog page</h3>
      <p>The industry's top wizards, doctors, and other experts offer their best advice, research, how-tos, 
          and insights, all in the name of helping you level-up your SEO and online marketing skills. Looking for the YouMoz Blog? </p>
        <span *ngFor="let index of articles; index as i">
            <div style="display: table; border: 1px solid black">
                <div class="posts-left col-md-6" style="display: table-row;">
                    <a>{{ articles[i].title }} -- {{i}}</a>
                    <p>{{ articles[i].body }}</p>
                </div>
                <div class="posts-right col-md-6" style="display: table-row;">
                    <a>{{ articles[i + 1].title }} -- {{i + 1}}</a>
                    <p>{{ articles[i + 1].body }}</p>
                </div>
            </div>
        </span>
    </div>
</div>

Answer 1

Создать массив четных индексов

this.indexes = data.reduce((indexes, _, i) => i % 2 ? indexes : [...indexes, i], []);

И, на ваш взгляд, вы можете использовать ngFor только для четных индексов

<span *ngFor="let index of indexes">

Answer 2

Вместо того, чтобы использовать таблицу и пытаться применять индексы таким образом, вам будет лучше использовать CSS.Например:

В моем component.ts:

numArray=[100,200,300,400,500,600,700,800];

На мой взгляд:

  <ul>
    <li *ngFor="let n of numArray; index as i">{{n}}, Index is {{i}}</li>
  </ul>

В css:

ul{
  width:400px;
}
li{
  float: left;
  list-style: none;
  width:150px;
  margin: 0px;
}
li:nth-child(even){
  margin-right: 0px;
}

Это даст следующий результат:

Вы можете изменить приведенный мной пример в соответствии с вашими потребностями.

Answer 3

TL; DR; Просто замените этот блок в своем HTML-файле

От:

<div style="display: table; border: 1px solid black">
    <div class="posts-left col-md-6" style="display: table-row;">
        <a>{{ articles[i].title }} -- {{i}}</a>
        <p>{{ articles[i].body }}</p>
    </div>
    <div class="posts-right col-md-6" style="display: table-row;">
        <a>{{ articles[i + 1].title }} -- {{i + 1}}</a>
        <p>{{ articles[i + 1].body }}</p>
    </div>
</div>

Кому: (удалено 4 строки)

<div style="display: table; border: 1px solid black">
    <div class="posts-left col-md-6" style="display: table-row;">
        <a>{{ articles[i].title }} -- {{i}}</a>
        <p>{{ articles[i].body }}</p>
    </div>
</div>

---

Из вашего скриншота видно, что только элемент 0th не повторяется дважды.И исходя из вашего HTML, это ожидается , так как вы визуализируете его дважды.

Ваш текущий шаблон

<span *ngFor="let index of articles; index as i">
    <div style="display: table; border: 1px solid black">
      <div class="posts-left col-md-6" style="display: table-row;">

          <!-- 1. Render the CURRENT 'article' -->
          <a>{{ articles[i].title }} -- {{i}}</a>
          <p>{{ articles[i].body }}</p>

      </div>
      <div class="posts-right col-md-6" style="display: table-row;">

          <!-- 2. Render the NEXT 'article' -->
          <a>{{ articles[i + 1].title }} -- {{i + 1}}</a>
          <p>{{ articles[i + 1].body }}</p>

      </div>
    </div>
</span>

Ниже приводитсяшаги, как angular отображает ваш articles.

1. Визуализация 0-го элемента (Ваш шаблон отображает 0-ю и 1-ю статью)
2. Визуализация 1-го элемента (Ваш шаблон отображает 1-ю и 2-ю статью)
3. Визуализация 2-го элемента (Ваш шаблон отображает 2-ю и 3-ю статью)
4. И так далее.

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

<div class="posts-left col-md-6" style="display: table-row;">
    <!-- 1. Render ONLY THE CURRENT 'article' -->
    <a>{{ articles[i].title }} -- {{i}}</a>
    <p>{{ articles[i].body }}</p>
</div>

Примечание: уже есть сообщение, которое хорошо использует ngFor ЗДЕСЬ .