如何在Angular的*ngFor循环中从索引1而不是索引0开始循环?

huangapple go评论80阅读模式
英文:

How to start loop from index 1 instead of index 0 in *ngFor loop in angular?

问题

我目前从一个虚拟API获取一些数据,响应中的数据从1开始,索引目前从0开始。

如何将索引循环从1开始而不是0?

以下是*ngFor的HTML部分:

component.html

       <div class="all-users" >
            <div class="nested-items"  *ngFor="let data of flattenedResponse[0]; let i=index;" (click)="switchUsers(i)">
                <h4>{{i + 1}}</h4>&nbsp;
                <img src="{{data.image}}" alt="profile">
            </div>
        </div>
英文:

I am currently getting some data from a dummy api, data from response starts from 1 and the index is currently starting from 0.

How I can start the index loop from 1 instead of 0?

Following the html for *ngFor below:

component.html

       &lt;div class=&quot;all-users&quot; &gt;
            &lt;div class=&quot;nested-items&quot;  *ngFor=&quot;let data of flattenedResponse[0]; let i=index;  &quot; (click)=&quot;switchUsers(i)&quot;&gt;
                &lt;h4&gt;{{i}}&lt;/h4&gt;&amp;nbsp;
                &lt;img src=&quot;{{data.image}}&quot; alt=&quot;profile&quot;&gt;
            &lt;/div&gt;
        &lt;/div&gt;

答案1

得分: 2

不要回答我要翻译的问题。以下是要翻译的内容:

"Why not just do the following:

       &lt;div class=&quot;all-users&quot; &gt;
        &lt;div class=&quot;nested-items&quot;  *ngFor=&quot;let data of flattenedResponse[0]; let i=index;  &quot; (click)=&quot;switchUsers(i)&quot;&gt;
            &lt;h4&gt;{{i + 1}}&lt;/h4&gt;&amp;nbsp;
            &lt;img src=&quot;{{data.image}}&quot; alt=&quot;profile&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;

I don't know of a way to change where the index starts, but this way works fine for most cases"

英文:

Why not just do the following:

       &lt;div class=&quot;all-users&quot; &gt;
        &lt;div class=&quot;nested-items&quot;  *ngFor=&quot;let data of flattenedResponse[0]; let i=index;  &quot; (click)=&quot;switchUsers(i)&quot;&gt;
            &lt;h4&gt;{{i + 1}}&lt;/h4&gt;&amp;nbsp;
            &lt;img src=&quot;{{data.image}}&quot; alt=&quot;profile&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;

I don't know of a way to change where the index starts, but this way works fine for most cases

答案2

得分: 1

如何从1而不是0开始索引循环

这里的正确答案是... 你无法这样做。

已经有一些建议了,但个人建议避免修改你的标记以绕过 API 返回的数据结构。让你的标记需要了解服务器的操作通常是一个不好的想法。

如果你的 API 返回的数组格式不适合你的标记 - 只需创建一个新的数据数组,并将你的标记指向它。最好在处理 API 结果的地方执行这个操作,但如果没有其他办法,可以在你的 .ts 文件中完成。

英文:

> How I can start the index loop from 1 instead of 0

The correct answer here is... you can't.

So there are some suggestions already, but personally I would avoid hacking your markup to get round the data structure the api returns. It's generally a bad idea to make your markup need to know too much about what your server does.

If the array your api returns is not in the best format for your markup - just create a new data array which is, and point your markup at that. It's best to do this in a service at the point you handle the api result, but if nothing else, do it in your .ts file.

答案3

得分: 0

Sure, here is the translated code:

你尝试过这样写吗:

&lt;div class=&quot;all-users&quot;&gt;
  &lt;div class=&quot;nested-items&quot; *ngFor=&quot;let data of flattenedResponse[0]; let i=index;  &quot; (click)=&quot;switchUsers(i+1)&quot;&gt;
    &lt;h4&gt;{{i+1}}&lt;/h4&gt;&amp;nbsp; &lt;img src=&quot;{{data.image}}&quot; alt=&quot;profile&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;

或者你可以跳过第一个元素,像这样写:

&lt;div class=&quot;nested-items&quot; *ngFor=&quot;let data of flattenedResponse[0] | slice:1; let i=index;  &quot; (click)=&quot;switchUsers(i)&quot;&gt;&lt;/div&gt;

Please note that I've retained the original HTML tags and attribute values while providing the Chinese translation for the code.

英文:

have you try :

&lt;div class=&quot;all-users&quot;&gt;
  &lt;div class=&quot;nested-items&quot; *ngFor=&quot;let data of flattenedResponse[0]; let i=index;  &quot; (click)=&quot;switchUsers(i+1)&quot;&gt;
    &lt;h4&gt;{{i+1}}&lt;/h4&gt;&amp;nbsp; &lt;img src=&quot;{{data.image}}&quot; alt=&quot;profile&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;

or you can just skip first element like this :

&lt;div class=&quot;nested-items&quot; *ngFor=&quot;let data of flattenedResponse[0] | slice:1; let i=index;  &quot; (click)=&quot;switchUsers(i)&quot;&gt;&lt;/div&gt;

答案4

得分: 0

你可以明确使用 *ngIf 来跳过第一个索引:

&lt;div class=&quot;all-users&quot;&gt;
  &lt;div class=&quot;nested-items&quot; *ngFor=&quot;let data of flattenedResponse[0]; let i=index;&quot; (click)=&quot;switchUsers(i)&quot;&gt;
    &lt;ng-container *ngIf=&quot;index !== 0&quot;&gt;
      &lt;h4&gt;{{i}}&lt;/h4&gt;&amp;nbsp;
      &lt;img src=&quot;{{data.image}}&quot; alt=&quot;profile&quot;&gt;
    &lt;/ng-container&gt;
  &lt;/div&gt;
&lt;/div&gt;
英文:

You can skip first index explicitly with *ngIf:

&lt;div class=&quot;all-users&quot; &gt;
  &lt;div class=&quot;nested-items&quot;  *ngFor=&quot;let data of flattenedResponse[0]; let i=index;&quot; (click)=&quot;switchUsers(i)&quot;&gt;
    &lt;ng-container *ngIf=&quot;index !== 0&quot;&gt;
      &lt;h4&gt;{{i}}&lt;/h4&gt;&amp;nbsp;
        &lt;img src=&quot;{{data.image}}&quot; alt=&quot;profile&quot;&gt;
      &lt;/div&gt;
    &lt;/ng-container&gt;
  &lt;/div&gt;
&lt;/div&gt;

huangapple
  • 本文由 发表于 2023年1月9日 17:42:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/75055430.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定