Angular *ngFor 不填充任何数据答案

【问题标题】：Angular *ngFor not populating any dataAngular *ngFor 不填充任何数据
【发布时间】：2017-12-09 18:51:51
【问题描述】：

export class AppComponent {
  pickBtnClicked = false;
  selectedPickNumber: 'string';
  selectedRegion: 'string';
  currentPickSelection: any[];
  channelList: any[];

  constructor(private pickGroupService: PickGroupService, private channelsService: ChannelsService) {}

  onPkClick(btnPicked) {
    this.pickBtnClicked = true;
    this.selectedPickNumber = btnPicked;
  }
  onRegionClick(regionPicked) {
    this.selectedRegion = regionPicked;
    this.currentPickSelection = this.pickGroupService.getPickSet(this.selectedPickNumber, this.selectedRegion);
    console.log(this.currentPickSelection);
  }
}

console.log 将此数据打印到浏览器控制台

但下面的 ngFor 并没有从“currentPickSelection”数组中获取任何数据。

<ul class="w3-ul w3-card-4" align="right" >
          <li class="list-group-item" *ngFor="let channels of currentPickSelection">
            <strong><font size="2">{{ channels.channel }}</font><span class="w3-right"><font size="2">{{ channels.pickCode }}</font></span></strong>
          </li>
        </ul>

请指教！谢谢

【问题讨论】：

你能在这个问题中分享示例 json 响应吗？console.log(JSON.stringify(this.currentPickSelection)); 将打印共享数据日志

标签： angular ngfor

【解决方案1】：

您的 html 看起来不正确。你有一个数组（你使用*ngFor on），里面有包含对象的数组。因此，您需要先访问每个channels 中的对象，然后再访问道具。

<ul class="w3-ul w3-card-4" align="right" >
    <li class="list-group-item" *ngFor="let channels of currentPickSelection">
         <strong><font size="2">{{ channels[0].channel }}</font><span class="w3-right"><font size="2">{{ channels[0].pickCode }}</font></span></strong>
    </li>
</ul>

【讨论】：

【解决方案2】：

您需要使用嵌套的 ngFor，因为您的频道又是一个数组

  <ul *ngFor="let channels of currentPickSelection">
        <li *ngFor="let channel of channels">
              <strong><font size="2">{{ channel.channel }}</font><span class="w3-right"><font size="2">{{ channel.pickCode }}</font></span></strong>
        </li>
  </ul>

【讨论】：

GetPickSet 是我创建的一项服务，它不会从网络上提取任何数据。而且我还将所有数据放入该数组中，但 ngfor 不会提取任何数据。
试试这个
{{ channels?.channel }}{{ 频道？.pickCode }}
@vicbyte tbh 我看不到你的答案！在看到我编辑的 OP 截图后，我正在寻找问题所在。即使现在你的答案与我的不同，我会说
谢谢 vicbyte。那行得通。我在数组中有对象。

【解决方案3】：

export class AppComponent {
  pickBtnClicked = false;
  selectedPickNumber: 'string';
  selectedRegion: 'string';
  currentPickSelection: any[];
  channelList: any[];

  constructor(private pickGroupService: PickGroupService, private channelsService: ChannelsService) {}

  onPkClick(btnPicked) {
    this.pickBtnClicked = true;
    this.selectedPickNumber = btnPicked;
  }
  onRegionClick(regionPicked) {
    this.selectedRegion = regionPicked;
    this.currentPickSelection = this.pickGroupService.getPickSet(this.selectedPickNumber, this.selectedRegion);
    console.log(this.currentPickSelection);
this.keysofdata = Object.keys(this.currentPickSelection) <---can get keys
  }
}

ul class="w3-ul w3-card-4" align="right" >
          <li class="list-group-item" *ngFor="let channels of currentPickSelection;let i = index;">
            <strong><font size="2">{{ currentPickSelection[i][i].channel  }}</font><span class="w3-right"><font size="2">{{currentPickSelection[i][i].pickCode }}</font></span></strong>
          </li>
        </ul>

【讨论】：

{{ channels?.channel }}{{ 频道？.pickCode }}