Question

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

该页面根据条件的结果列表有一些链接应填写点击。
在填充的结果中，前两个元素应该是另一个实现一个样式风格和其他应该实现另一种风格。

我尝试通过执行以下操作来实现此目的，但我无法遍历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中创建了过滤器，如下所示：从'@ angular / core'导入{Component，OnInit};

@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;
  }

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

angular2从api获取json数据并显示

0 个答案: