Question

尝试构建一个click事件，当选择tierName时，它将显示活动层和其中的colorNames。

这是我的组件：

    tiers: Tier[] = [
        {
          'tierName': "Primary",
          'description': "A set of colors that can be combined to make a useful range of colors.",
          'colors': [
            {colorName: 'Red', mix1: null, mix2: null, label: 'Primary'},
            {colorName: 'Blue', mix1: null, mix2: null, label: 'Primary'},
            {colorName: 'Yellow', mix1: null, mix2: null, label: 'Primary'}
          ]
        },
        {
          'tierName': "Secondary",
          'description': "A color made by mixing two primary colors",
          'colors': [
            {colorName: 'Purple', mix1: 'Blue', mix2: 'Red', label: 'Secondary'},
            {colorName: 'Orange', mix1: 'Red', mix2: 'Yellow', label: 'Secondary'},
            {colorName: 'Green', mix1: 'Blue', mix2: 'Yellow', label: 'Secondary'}
          ]
        },
        {
          'tierName': "Tertiary",
          'description': "A color made by mixing full saturation of one primary color with half saturation of another primary color and none of a third primary color.",
          'colors': [
            {colorName: 'Vermilion', mix1: 'Red', mix2: 'Orange', label: 'Tertiary'},
            {colorName: 'Amber', mix1: 'Orange', mix2: 'Yellow', label: 'Tertiary'},
            {colorName: 'Chartreuse', mix1: 'Yellow', mix2: 'Green', label: 'Tertiary'},
            {colorName: 'Teal', mix1: 'Green', mix2: 'Blue', label: 'Tertiary'},
            {colorName: 'Violet', mix1: 'Blue', mix2: 'Purple', label: 'Tertiary'},
            {colorName: 'Magenta', mix1: 'Purple', mix2: 'Red', label: 'Tertiary'}
          ]
        }
  ];
activeTier: tier;

selectTier(tier) {
this.activeTier = tier;

使用* ngIf和* ngFor来调用它：

    <div *ngIf="tiers">
      <ul class="list-group tiers-list"> 
        <li class="list-group-item" 
          *ngFor="let tier of tiers"
          (click)="selectTier(tier)"
          [class.active]="tier === activeTier">
          {{ tierName }}
        </li>
      </ul>
    </div>

我已经厌倦了以下组件名称：

tiers: Tier[] = {...};
tiers.tierlist = {...};
let tier: tier.list[] = {...};

我真的很难过，对Angular和Typescript来说还是很新的。任何方向或输入都非常感谢！

我知道我混淆了对象和数组，我已经纠正了代码并且能够访问tierName但是我仍然无法访问颜色的colorName。

Answer 1

首先，你所谓的“列表”是一个对象，因此* ngFor仅适用于数组。

您有2个选项：

1）将您的“列表”转换为真实列表，例如： [{}，{}，{}]或更容易yourArray：Object [] = Object.values（您的对象）

2）创建一个管道来转换数组中的Object，如下所示：

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({name: 'keys'})
export class ObjectKeysPipe implements PipeTransform {
  transform(value: Object, args: string[]) : any {
    if (!value || Object.keys(value).length === 0){
      return [];
    }
    let keys = [];
    for (let key in value) {
      keys.push({key: key, value: value[key]});
    }
    return keys;
  }
}

然后使用它：

<div *ngIf="tiers">
 <ul class="list-group tiers-list"> 
    <li class="list-group-item" 
      *ngFor="let tier of (tiers | keys)"
      (click)="selectTier(tier.value)"
      [class.active]="tier.value === activeTier">
      {{ tier.value.tierName }}
    </li>
  </ul>
</div>

Answer 2

更新：由于我们获得了有关实际数据的一些新信息，因此根据您提供的内容，以下解决方案应该有效：

首先只是遍历层数组，并使用选择活动层的click函数：

<div *ngIf="tiers">
  <ul class="list-group tiers-list">
    <li class="list-group-item"
      *ngFor="let tier of tiers"
      (click)="selectTier(tier)">
      {{ tier.tierName }}
    </li>
  </ul>
</div>

您拥有selectTier - 方法和变量activeTier：

activeTier: tier;

selectTier(tier) {
   this.activeTier = tier;
}

然后只添加一个条件div，除非有活动层，否则不会显示。由于我们正在处理一个数组，我们可以使用activeTier.colors迭代嵌套数据，这将在ngFor中迭代colors数组。

<div *ngIf="activeTier">
    <div *ngFor="let col of activeTier.colors">{{col.colorName}}</div>
</div>

然后你去了，一切都完成了：）

如何列出一个数组，然后单击列出该数组中的数组？ Angular2和Typescript

2 个答案: