Question

我是Angular的新手，目前正在学习Angular 6，这是Angular的最新版本。

在这里，我试图用从JSON检索的文章来设计我的博客页面，并在两列中显示它们，如下图所示：

标题旁边的数字是文章在文章数组中的索引。很容易看到问题：从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：

从'@ angular / core'导入{Component，OnInit}; 从“ ../blog.service”导入{BlogService};

@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

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>

以下是角度如何渲染articles的步骤。

渲染第0个元素（您的模板渲染第0个和第1个文章）
渲染第一个元素（您的模板渲染第一个和第二个文章）
渲染第二个元素（您的模板渲染第二个和第三个文章）
依此类推。

如果您只想为每个元素渲染一次，只需像这样

<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 HERE。

Answer 2

创建偶数索引数组

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

在您看来，您可以仅对偶数索引ngFor

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

Answer 3

与其使用表并尝试以这种方式应用索引，不如使用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;
}

这将输出为：

您可以修改我提供的示例以适合您的需求。

Angular-带索引的* ngFor循环

3 个答案: