title: Bootstrap table displaying columns using *ngFor
body: <p>I am trying to display 3 columns.</p>
  
  <ol>
  <li>Line</li>
  <li>AwayTeam</li>
  <li>HomeTeam</li>
  </ol>
  
  <p>I am able to display Line column properly on the page. But 2nd and 3rd column which are AwayTeam and HomeTeam are not being displayed.</p>
  
  <p>Here is the code that I tried</p>
  
  <p>x.component.ts</p>
  
  <pre><code>import {Component} from '@angular/core';
  import {HttpClient} from '@angular/common/http'
  import {forkJoin} from 'rxjs';
  import {map} from 'rxjs/operators';
  
  @Component({
    selector: 'app-mlb-api',
    templateUrl: './mlb-api.component.html',
    styleUrls: ['./mlb-api.component.css']
  })
  export class MlbApiComponent  {
   loadedCharacter: {  
   homeTeamName:string, 
   awayTeamName:string, 
   line:string, 
   EventId:string,
   visitorTeam:string,
   homeTeam:string} = &lt;{homeTeamName:string, awayTeamName:string, line:string, EventId:string, visitorTeam:string,homeTeam:string}&gt;{};
      allhomeTeamName;
    allawayTeamName;
    allline;
    constructor(private http: HttpClient) {
  
    }
  
  
  ngOnInit() {
  
      let character = this.http.get('https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json')
      .pipe(map((re: any) =&gt; re.events));
      let characterHomeworld = this.http.get('https://www.fantasylabs.com/api/sportevents/3/2019_06_17');
  
      forkJoin([character, characterHomeworld]).subscribe(([draftkingsResp, fantasylabsResp]) =&gt; {      
  
        //this.allNames = draftkingsResp.map(r =&gt; r.name);
        //console.log(this.allNames);
  
        this.allhomeTeamName = draftkingsResp.map(r =&gt; r.homeTeamName);
        //console.log(this.allhomeTeamName);
  
         this.allawayTeamName = draftkingsResp.map(r =&gt; r.awayTeamName);
        //console.log(this.allawayTeamName);
  
         //this.alllabel = draftkingsResp.map(r =&gt; r.offers).flat().map(o =&gt; o.label);
        //console.log(this.alllabel);
  
        this.allline = draftkingsResp.map(r=&gt;r.offers).flat().map(r =&gt; r.outcomes).flat().map(o =&gt; o.line);
         console.log(this.allline);
        //this.allline will have 'undefined' as well
        //if you want then you can filter
        this.allline = this.allline.filter(l =&gt; !!l);
        console.log(this.allline);
      });
    }}
  </code></pre>
  
  <p>x.component.html</p>
  
  <pre><code>
  
  &lt;table class="table table-striped table-condensed table-hover"&gt;
  
  
  
  
  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-4"&gt;
        &lt;div class="table-responsive"&gt;
          &lt;table summary="This table shows how to create responsive tables using Bootstrap's default functionality" class="table table-bordered table-hover"&gt;
  
            &lt;thead&gt;
              &lt;tr&gt;
                &lt;th&gt;Information&lt;/th&gt;
                &lt;th&gt;HomeTeam vs AwayTeam&lt;/th&gt;
                &lt;th&gt;Line&lt;/th&gt;
  
  
  
              &lt;/tr&gt;
            &lt;/thead&gt;
  
            &lt;tbody&gt;
              &lt;tr&gt;
                &lt;td&gt;Name&lt;/td&gt;
                &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
  
                    &lt;ng-container *ngFor="let n of allhomeTeamName"&gt;
                      &lt;tr&gt;&lt;td&gt;{{n}}&lt;/td&gt;&lt;/tr&gt;
                    &lt;/ng-container&gt;
  
  
                  &lt;/tbody&gt;
  
                  &lt;tbody&gt;
              &lt;tr&gt;
  
                &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
  
                    &lt;ng-container *ngFor="let n of allawayTeamName"&gt;
                      &lt;tr&gt;&lt;td&gt;{{n}}&lt;/td&gt;&lt;/tr&gt;
                    &lt;/ng-container&gt;
  
  
                  &lt;/tbody&gt;
  
  
  
                  &lt;/div&gt;
                &lt;/div&gt;
  
             &lt;tbody&gt;
              &lt;tr&gt;
  
                &lt;div class="container"&gt;
                  &lt;div class="row"&gt;
  
                    &lt;ng-container *ngFor="let n of allline"&gt;
                      &lt;tr&gt;&lt;td&gt;{{n}}&lt;/td&gt;&lt;/tr&gt;
                    &lt;/ng-container&gt;
  
  
                  &lt;/tbody&gt;
  
  
                  &lt;/div&gt;
                &lt;/div&gt; --&gt;
  
  &lt;h4&gt;Draft Kings&lt;/h4&gt;
  
  &lt;table class="table table-striped table-condensed table-hover"&gt;
                  &lt;thead&gt;
                      &lt;tr&gt;
  
  
                          &lt;th class="line"&gt;Line&amp;nbsp;&lt;a ng-click="sort_by('line')"&gt;&lt;i class="icon-sort"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt;
                          &lt;th class="awayTeamName"&gt;awayTeamName&amp;nbsp;&lt;a ng-click="sort_by('awayTeamName')"&gt;&lt;i class="icon-sort"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt;
                          &lt;th class="field3"&gt;homeTeam&amp;nbsp;&lt;a ng-click="sort_by('HomeTeam')"&gt;&lt;i class="icon-sort"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/th&gt;
  
  
                      &lt;/tr&gt;
                  &lt;/thead&gt;
  
                  &lt;tbody&gt;
                          &lt;ng-container *ngFor="let data of allline | paginate: { itemsPerPage: 5, currentPage: p }; let i = index"&gt;
  
                      &lt;tr ng-repeat="data in pagedItems[currentPage] | orderBy:sortingOrder:reverse"&gt;
  
          &lt;td&gt;{{data }}&lt;/td&gt;
          &lt;td&gt;{{awayTeamName}}&lt;/td&gt;
  
  
         &lt;td&gt;{{line}} &lt;/td&gt;
  
                      &lt;/tr&gt;
                    &lt;/ng-container&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt; 
               &lt;pagination-controls (pageChange)="p = $event"&gt;&lt;/pagination-controls&gt;
  </code></pre>
  
  <p>How can I display 2nd column which is awayTeam  and 3rd column which is homeTeam ?</p>