我正在尝试实现一个页面，我必须从API获取json数据并仅使用Angular2在页面上显示它们 . 现在有趣的部分是 -

  • 该页面有一些链接，这些链接基于其标准，应该在其上填充结果列表 .

  • 在填充的结果中，前2个元素应该实现一个样式接下来的另一个样式，其余的应该实现另一个样式 .

我尝试通过执行以下操作来实现此目的，但我无法遍历ngfor元素（尝试@viewchildren，但这也无效） . 我不确定实现是否正确，因为我是angular2的新手 .

HTML：

<li [class.active]="selectedFilter=='entertainment'" 
    (click)="changeViewFilter('entertainment')">
    <a>
              <div><img src="large.svg"/></div>
          </a>
        </li>
        <li [class.active]="selectedFilter=='more'"
    (click)="changeViewFilter('other')">
          <a>
              <div><img src="More-large.svg"/></div>
          </a>
        </li>

<ul id= "listid" class="styledclass">
    <div *ngFor="let item of items; let i= index;">
      <li *ngIf=" selectedFilter === ''">(this condition to display all the items when display all items is clicked)
        <div class="opitem">
          <img src="{{ offer.url == '' ? 'image source here' }}">
          <div class="item-info">
            <p><strong>{{ item.title }}</strong></p>
            <p>
              {{ item.info }}
            </p>
          </div>
        </div>
      </li>
    </div>
    <li *ngIf="item.category === selectedFilter">(this condition to display items that match the category)
        <div class="opitem">
          <img src="{{ offer.url == '' ? 'image source here' }}">
          <div class="item-info">
            <p><strong>{{ item.title }}</strong></p>
            <p>
              {{ item.info }}
            </p>
          </div>
        </div>
      </li>
    </div>

由于我不知道如何从API中获取数据，我暂时创建了样本数据并在ts中创建了过滤器，如下所示：import @ Component，OnInit}来自'@ angular / core';

@Component({
  selector: 'items-list',
  templateUrl: './items-list.component.html',
  styleUrls: ['./items-list.component.scss']
})
export class itemsListComponent implements OnInit {

  public selectedFilter = '';
offers = [
    {
      "itemId": 300,
      "title": "sometitle11,
      "info": "This is the Information for 1.",
      "category": "fashion",
    },
    {
      "itemId": 200,
      "title": "sometitle12,
      "info": "This is the Information for 2.",
      "category": "fashion",
    }];

changeViewFilter(currentFilter) {
    this.selectedFilter = currentFilter;
  }

My Question: 我尝试迭代生成的元素，但是css不适用于列表项目（这是前四个有一个类接下来的另外四个样式类，休息有另一个类“） . 最好的方法是什么获取json数据的方法，将它们存储到数组中并在单击过滤器菜单时显示项目，并以不同方式应用元素的样式 .

css json angular typescript