Bootstrap表使用* ngFor显示列 [英] Bootstrap table displaying columns using *ngFor
本文介绍了Bootstrap表使用* ngFor显示列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图显示3列.
- 线
- 客队
- 家庭团队
我能够在页面上正确显示行"列.但是不会显示AwayTeam和HomeTeam的第二和第三列.
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.
这是我尝试过的代码
x.component.ts
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
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> -->
<h4>Draft Kings</h4>
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th class="line">Line <a ng-click="sort_by('line')"><i class="icon-sort"></i></a></th>
<th class="awayTeamName">awayTeamName <a ng-click="sort_by('awayTeamName')"><i class="icon-sort"></i></a></th>
<th class="field3">homeTeam <a ng-click="sort_by('HomeTeam')"><i class="icon-sort"></i></a></th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let data of allline | paginate: { itemsPerPage: 5, currentPage: p }; let i = index">
<tr ng-repeat="data in pagedItems[currentPage] | orderBy:sortingOrder:reverse">
<td>{{data }}</td>
<td>{{awayTeamName}}</td>
<td>{{line}} </td>
</tr>
</ng-container>
</tbody>
</table>
<pagination-controls (pageChange)="p = $event"></pagination-controls>
我如何显示第二列(即awayTeam)和第三列(即homeTeam)?
How can I display 2nd column which is awayTeam and 3rd column which is homeTeam ?
推荐答案
- 在您的情况下,allhomeTeamName,allawayTeamName,allline是3个不同的数组.但是,您尝试仅循环所有行数组.
- 这就是为什么它只显示Line列而不显示AwayTeam和HomeTeam列的原因.
- 要在单个表中显示所有3列,您需要使用以上3个数组创建一个数组.
- 但是在您的情况下,这3个数组的长度(大小)不相等.
- allline数组包含168个项目,其他2个数组包含68个项目.
- 无法从您的问题中得到一个清晰的主意,即如何使用awayTeam和homeTeam绘制线.这意味着对于特定的线路,会有特定的awayTeam和特定的homeTeam.
- 因此,我将假设allline数组的第一个元素与allawayTeamName数组和allhomeTeamName数组的第一个元素匹配. allline数组的n个位置的元素与allhomeTeamName和allawayTeamName数组的n个位置的元素匹配.
- 我通过假设以上提到的观点来给出解决方案.
- In your case allhomeTeamName, allawayTeamName, allline are 3 different arrays. But you try to loop only allline array.
- That is why it displays only Line column and not displaying AwayTeam and HomeTeam columns.
- To display all 3 columns in a single table you need to create a single array using above 3 arrays.
- But in your case length(size) of those 3 arrays are not equal.
- allline array contains 168 items and other 2 arrays contain 68 items.
- Cannot get a clear idea from your question how you map line with awayTeam and homeTeam. That means for a specific line there is a specific awayTeam and specific homeTeam.
- Therefore I will assume that first element of allline array is match to first element of allawayTeamName array and allhomeTeamName array. element of n position of allline array is match to elements that are in n position of allhomeTeamName and allawayTeamName arrays.
- I am giving my solution by assuming above point which I mentioned.
TS
export class AppComponent {
allhomeTeamName;
allawayTeamName;
allline;
all: Array<{line: string, awayTeam: string, homeTeam: string}> = [];
constructor(private http: HttpClient) {}
ngOnInit() {
const character = this.http.get('https://sportsbook.draftkings.com/api/odds/v1/leagues/3/offers/gamelines.json').pipe(map((re: any) => re.events));
const characterHomeworld = this.http.get('https://www.fantasylabs.com/api/sportevents/3/2019_06_17');
forkJoin([character, characterHomeworld]).subscribe(([draftkingsResp, fantasylabsResp]) => {
this.allhomeTeamName = draftkingsResp.map(r => r.homeTeamName);
this.allawayTeamName = draftkingsResp.map(r => r.awayTeamName);
this.allline = draftkingsResp.map(r=>r.offers).flat().map(r => r.outcomes).flat().map(o => o.line);
this.allline = this.allline.filter(l => !!l);
this.createAllArray();
});
}
createAllArray(): void {
for (let i = 0; i < this.allline.length; i++) {
let item = {
line: this.allline[i],
awayTeam: this.allawayTeamName[i],
homeTeam: this.allhomeTeamName[i]
}
this.all.push(item);
}
}
}
HTML
<table class="table table-striped table-condensed table-hover">
<thead>
<tr>
<th class="line">Line <a ng-click="sort_by('line')"><i class="icon-sort"></i></a></th>
<th class="awayTeamName">awayTeamName <a ng-click="sort_by('awayTeamName')"><i class="icon-sort"></i></a></th>
<th class="field3">homeTeam <a ng-click="sort_by('HomeTeam')"><i class="icon-sort"></i></a></th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let item of all">
<tr>
<td>{{item.line }}</td>
<td>{{item.awayTeam}}</td>
<td>{{item.homeTeam}} </td>
</tr>
</ng-container>
</tbody>
</table>
我认为这会为您提供帮助,并找到一个有效的stackblitz演示
I think this will help you and find a working stackblitz demo HERE.
这篇关于Bootstrap表使用* ngFor显示列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文