Question

我正尝试显示3列1. Information 2.HomeTeam vs AwayTeam 3.Line

我能够正确显示Information和HomeTeam vs AwayTeam列。但是第三列Line不会显示为新列，但其数据显示在第二列中。

这是我尝试过的代码

x.component.ts

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} = <{homeTeamName:string, awayTeamName:string, line:string, EventId:string, visitorTeam:string,homeTeam:string}>{};
    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) => re.events));
    let characterHomeworld = this.http.get('https://www.fantasylabs.com/api/sportevents/3/2019_06_17');

    forkJoin([character, characterHomeworld]).subscribe(([draftkingsResp, fantasylabsResp]) => {      

      //this.allNames = draftkingsResp.map(r => r.name);
      //console.log(this.allNames);

      this.allhomeTeamName = draftkingsResp.map(r => r.homeTeamName);
      //console.log(this.allhomeTeamName);

       this.allawayTeamName = draftkingsResp.map(r => r.awayTeamName);
      //console.log(this.allawayTeamName);

       this.alllabel = draftkingsResp.map(r => r.offers).flat().map(o => o.label);
      //console.log(this.alllabel);

      this.allline = draftkingsResp.map(r=>r.offers).flat().map(r => r.outcomes).flat().map(o => 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 => !!l);
      console.log(this.allline);
    });
  }}

x.component.html



<table class="table table-striped table-condensed table-hover">




<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="table-responsive">
        <table summary="This table shows how to create responsive tables using Bootstrap's default functionality" class="table table-bordered table-hover">

          <thead>
            <tr>
              <th>Information</th>
              <th>HomeTeam vs AwayTeam</th>
              <th>Line</th>


            </tr>
          </thead>

          <tbody>
            <tr>
              <td>Name</td>
              <div class="container">
                <div class="row">

                  <ng-container *ngFor="let n of allhomeTeamName">
                    <tr><td>{{n}}</td></tr>
                  </ng-container>


                </tbody>

                <tbody>
            <tr>

              <div class="container">
                <div class="row">

                  <ng-container *ngFor="let n of allawayTeamName">
                    <tr><td>{{n}}</td></tr>
                  </ng-container>


                </tbody>



                </div>
              </div>

           <tbody>
            <tr>

              <div class="container">
                <div class="row">

                  <ng-container *ngFor="let n of allline">
                    <tr><td>{{n}}</td></tr>
                  </ng-container>


                </tbody>


                </div>
              </div>

如何将Line显示为单独的列，以使其不与第二列合并？

Answer 1

可能是因为对列使用* ngfor。您应该通过ngfor创建行。这样，将基于对象数组创建行，这些对象包括您定义的属性，例如Information，HomeTeam与AwayTeam，Line等。您的表格主体应如下所示：

<tbody>
<tr *ngFor="let score of Scores">
    <td>{{ score.Information }}</td>
    <td>{{ score.HomeTeam }} vs {{ score.AwayTeam }}</td>
    <td>{{ score.Line }}</td>
</tr>

我不知道这些属性的作用是什么，但是表是由对象数组创建的，并具有每行中数组对象的绑定值视图。

Answer 2

请尝试以下操作来显示表并迭代表行tr

HTML

<table class="table table-striped table-condensed table-hover">
     <div class="table-responsive">
            <thead>
                <tr>
                    <th>Information</th>
                    <th>HomeTeam vs AwayTeam</th>
                    <th>Line</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td *ngFor="let n of allhomeTeamName">
                       {{n}}
                    </td>
                </tr>
            </tbody>
    </div>
</table>

TS（app.component.ts）

export class AppComponent {
  allhomeTeamName = ["Yellow", "Blue", "Green"];
}

stackblitz demo

难以将数据显示为不同的列引导程序

2 个答案: