如何在Angular 4的同一个ngFor中使用两个不同的索引变量

Question

我正在尝试为每个仅打印到星期六的项目获取一组不同的索引号。 一旦星期六开始打印，我的值应从0开始并继续。 其他选项应具有相同的数值。 我该如何实现？

这是我在StackBlitz中的代码

Answer 1

这正是为...创建模数的原因。

但要明确：在数组中不能有两个索引。 这甚至都不合逻辑：如果您这样做了，您是否不认为它们会具有相同的价值？

取而代之的是使用模（它是法文的名字，我不知道它是否翻译过）：

<div *ngFor="let item of items; let i = index">
  <span *ngIf="i % 7 === 5">It's Saturday !</span>
</div>

片段：

 const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; const month = [...days, ...days, ...days, ...days]; month.forEach((day, i) => { if (i % 7 !== 5) { return; } console.log(day); }); 

编辑一个如果您有一个无序的天数组，“重新启动索引”的最佳方法是将您的数组拆分为几个。

如果要在周六重新启动，请尝试以下操作：

array=["monday","monday", "tuesday", "wednessday", "thursday", "friday", "saturday", "sunday", "saturday", "sunday"];
splitted = this.array.reduce((p, n) => {
  if (n === 'saturday') { p.push([n]); return p; }
  p[p.length - 1].push(n);
  return p;
}, [[]]);

    <p *ngIf="options != 'saturday' ">
      {{i}}. First category : Value{{i}}
      <p>
        <p *ngIf="options == 'saturday'" style="color:red">
          {{i}}. Saturday : Value{{i}}
        </p>
  </div>
</div>

这是您更新的堆栈闪电战。

编辑两个，我希望这次是！ 只需使用吸气剂创建一个计数器，并在生命周期完成后将其初始化为零即可。

private counter;

get saturdayCounter() {
  return this.counter++;
}

ngAfterContentChecked() {
  this.counter = 0;
}

<p *ngIf="options == 'saturday'" style="color:red">
  {{i}}. Saturday : Value{{saturdayCounter}}
</p>

这是一个有效的堆叠闪电战。

Answer 2

根据您的“数组”创建一个新数组

let newArray:any[]=[];
let count:number=0;

this.array.forEach((a,index)=>{
   if (a=="saturday")
   {
     newArray.push({type:1,index:count});
     count++
   }
   else
     newArray.push({type:0,index:index});
})