Question

我在json文件中有一个数据列表。我想显示所有月份，但我希望匹配的年份只显示为一个重要的年份。我以不同的名字发布了这个问题，没人能看到。看图片：该图显示了相同的数据，但已分为年和月。我只想在粉红色块的中间说2017，而不是一遍又一遍地重复2017。问题在于它需要与数据保持一致，因为数据一直在变化，它说2017可以轻松更改为2018，因此需要说出数据指定的正确年份。

JSON：

[
{
    "month": "2017-03-01",
    "modelVolume" [{
           "id": 1,
           "model": P213
    }]
}
{
    "month": "2017-03-01",
    "modelVolume" [{
           "id": 1,
           "model": P213
    }]
}
{
    "month": "2017-03-01",
    "modelVolume" [{
           "id": 1,
           "model": P213
    }]
}
{
    "month": "2017-03-01",
    "modelVolume" [{
           "id": 1,
           "model": P213
    }]
}
{
    "month": "2017-03-01",
    "modelVolume" [{
           "id": 1,
           "model": P213
    }]
}
{
    "month": "2017-03-01",
    "modelVolume" [{
           "id": 1,
           "model": P213
    }]
}
{
    "month": "2017-03-01",
    "modelVolume" [{
           "id": 1,
           "model": P213
    }]
}
{
    "month": "2017-03-01",
    "modelVolume" [{
           "id": 1,
           "model": P213
    }]
}
{
    "month": "2017-03-01",
    "modelVolume" [{
           "id": 1,
           "model": P213
    }]
}]

我仅将“月份”数据用于此问题。

HTML：年份：

<div class="row justify-content-md-center">
    <div class="col-md-auto">
      <table id="year">
        <tr>
          <th class="y17" class="y18" *ngFor="let value of groupVolumes(groupKeys()[0])" [ngClass]="getYear(value.month)">{{ value.month | date: "yyyy" | uppercase }}</th>
        </tr>
      </table>
      </div>
    </div>

月份：

<div class="row justify-content-md-center">
     <div class="col-md-auto" class="scroll">
       <table id ="t2">
          <tr>
            <th class="line">Line 1</th>
            <th class="y18" *ngFor="let value of groupVolumes(groupKeys()[0])" [ngClass]="getYear(value.month)">{{ value.month | date: "MMM" | uppercase }}</th>
          </tr>

Answer 1

这是一个满足您需求的简单原型：
为简单起见，我将JSON文件的内容存储在名为data的字段变量中。
据我了解，该文件的内容将动态变化，因此您需要声明字段data作为该组件的输入，并实现抽象方法ngOnChanges，该方法将调用{{1 }}每次输入processData发生变化。
这是代码：

data

以不同的方式显示相同的数据

1 个答案: