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 没有从 "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>

请指教！谢谢

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>

Angular *ng不填充任何数据

Angular *ngFor not populating any data

ngfor

angular