Angular * ng不填充任何数据

Question

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并没有从＆＃34; currentPickSelection＆＃34;中获取任何数据。阵列。

<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>

请指教！感谢

Answer 1

您需要使用嵌套的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>

Answer 2

您的HTML看起来不正确。 你有一个数组（你使用*ngFor），里面有包含对象的数组。因此，您需要首先访问每个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>

Answer 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>