- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经在我的 Angular 应用程序中创建了一个服务。tournament.service.ts:
import {
Injectable
} from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class TournamentsService {
constructor() {}
getTurnaments() {
return [{
date: 1288323623006,
club: 'D',
name: 1.0079,
flight: 1,
archers: 1,
scoring: 1,
awards: 0
},
{
date: 1288323623006,
club: 'Helium',
name: 4.0026,
flight: 2,
archers: 2,
scoring: 2,
awards: 0
},
{
date: 1288323623006,
club: 'Lithium',
name: 6.941,
flight: 3,
archers: 3,
scoring: 3,
awards: 0
},
{
date: 1288323623006,
club: 'Beryllium',
name: 9.0122,
flight: 1,
archers: 4,
scoring: 4,
awards: 0
},
{
date: 1288323623005,
club: 'Boron',
name: 10.811,
flight: 3,
archers: 5,
scoring: 5,
awards: 0
},
{
date: 1288323630066,
club: 'Carbon',
name: 12.0107,
flight: 2,
archers: 6,
scoring: 6,
awards: 0
},
{
date: 1288323623006,
club: 'Nitrogen',
name: 14.0067,
flight: 1,
archers: 7,
scoring: 7,
awards: 0
},
{
date: 1288323630068,
club: 'Oxygen',
name: 15.9994,
flight: 4,
archers: 8,
scoring: 8,
awards: 0
},
{
date: 1288323630069,
club: 'Fluorine',
name: 18.9984,
flight: 5,
archers: 9,
scoring: 9,
awards: 0
},
{
date: 11288323230060,
club: 'Neon',
name: 20.1797,
flight: 2,
archers: 10,
scoring: 10,
awards: 0
},
{
date: 1288323630069,
club: 'Fluorine',
name: 18.9984,
flight: 5,
archers: 9,
scoring: 9,
awards: 0
},
{
date: 11288323230060,
club: 'Neon',
name: 20.1797,
flight: 2,
archers: 10,
scoring: 10,
awards: 0
},
];
}
}
现在我希望能够访问这些数据,然后将其显示在 Angular 数据表中...
我可以在这里访问这部分的数据:事件管理.component.ts:
import {Component, OnInit} from '@angular/core';
import {TournamentsService} from '../../tournaments.service';
@Component({
selector: 'app-eventmanagement',
templateUrl: './eventmanagement.component.html',
styleUrls: ['./eventmanagement.component.scss']
})
export class EventmanagementComponent implements OnInit {
constructor(private _TurnamentService: TournamentsService) { }
public Turnaments = [];
ngOnInit() {
this.Turnaments = this._TurnamentService.getTurnaments();
}
}
虽然我目前还在研究如何让它显示在像这样的垫子表中 (https://material.angular.io/components/table/examples)
这是我要开始工作的 table :事件管理.component.html:
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="date">
<th mat-header-cell *matHeaderCellDef>
<h2><b>Date</b></h2>
</th>
<td mat-cell *matCellDef="let Turnament"> {{Turnament.date | date:'yyyy-MM-dd Z'}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="club">
<th mat-header-cell *matHeaderCellDef>
<h2><b>Club</b></h2>
</th>
<td mat-cell *matCellDef="let Turnament"> {{Turnament.club}} </td>
</ng-container>
<!-- Weight Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>
<h2><b>Name</b></h2>
</th>
<td mat-cell *matCellDef="let Turnament"> {{Turnament.name}} </td>
</ng-container>
<!-- Symbol Column -->
<ng-container matColumnDef="flight">
<th mat-header-cell *matHeaderCellDef>
<h2><b>Flight</b></h2>
</th>
<td mat-cell *matCellDef="let Turnament"> {{Turnament.flight}} </td>
</ng-container>
<ng-container matColumnDef="archers">
<th mat-header-cell *matHeaderCellDef>
<h2><b>Archers</b></h2>
</th>
<td mat-cell *matCellDef="let Turnament"> {{Turnament.archers}} </td>
</ng-container>
<ng-container matColumnDef="scoring">
<th mat-header-cell *matHeaderCellDef>
<h2><b>Scoring</b></h2>
</th>
<td mat-cell *matCellDef="let Turnament"> {{Turnament.scoring}} </td>
</ng-container>
<ng-container matColumnDef="awards">
<th mat-header-cell *matHeaderCellDef>
<h2><b>Awards</b></h2>
</th>
<td mat-cell *matCellDef="let Turnament"> {{Turnament.awards}} </td>
</ng-container>
<tr style="background-color: lightsteelblue; font-weight: bold" mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="onRowClicked(row)"></tr>
</table>
最佳答案
看起来您缺少列定义
尝试在您的组件中声明它们,如下所示:
displayedColumns = ['date', 'club', 'name', 'flight', 'archers', 'scoring', 'awards'];
关于javascript - Angular 从 Service.component 获取数据到 mat-table,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54856881/
我正在使用 choronos,它建议使用 start/stop 命令开始停止,如下所示 开始计时 停止计时 但是,我正在编写 puppet manifest,它只适用于下面的服务命令。 服务计时开始
来历及作用 services.exe进程程序文件是由微软公司为其发布的Windows操作系统定义的一个系统进程,常见于Windows 2000/XP/Vista/2007等系统中,被描述为服务和控
我一直在尝试使用installutil:installutil /u GSIS.FileMoverService.exe安装Windows服务。 我得到的输出是: Uninstalling assem
如果一个域有多个团队和多个 Web 应用程序,那么注册 Service Worker 来管理整个站点的最佳建议是什么?具有范围的顶级服务 worker /或子域中的多个服务 worker ?由于一个域
我已经在 eclipse 中创建了企业项目。动态web项目和ejb项目对企业项目有借鉴意义。当我运行管理员(企业项目)运行时选择 wildfly 服务器 18。我收到以下错误。谁能告诉我我错过了什么。
我已经使用 apache-cxf-2.7.4 创建了一个 Web 服务。我进入了我的项目中制作的类(class)。我的项目中的库是: math3-commons-3.2.jar XStream-1.4
我在域中的 Virtual Box 中运行集群计算机,默认情况下服务在 Network 服务下运行,服务一直停止,事件日志中出现以下错误。 请从下面的错误日志中查找错误详细信息。任何帮助都会很棒。 L
在我的应用程序中,用户可以在 map 上发布事件。应用程序的入口点是一个无状态的 web api 服务。为了在内部代表用户,我想要一个用户服务。我应该何时使用 Reliable Stateful Ac
当我尝试运行在WIX中创建的安装程序时,出现以下错误消息: “服务'Report Generator Service'(报告生成器服务)无法启动。请验证您是否具有启动系统服务的足够特权”。 我已经在这
尝试使用 cloudformation 创建 ECS 服务(在 Fargate 上)但出现错误: Invalid service in ARN (Service: AmazonECS; Status
我正在编写一个简单的Windows服务,该服务每个月向所有员工发送一封电子邮件。我的问题是,完成后如何停止自我?我是该领域的新手,请帮帮我。非常感谢。 它将部署在服务器上以每月运行。我没有开始做这件事
有谁知道是否有办法在 service worker 中获取此号码或日期: 将我的服务 worker 缓存命名为 cache-1182 会很方便或 cache-20171127171448 我想在安装事
我想开始使用 Azure Service Fabric 技术。 我按照this document工作并安装最新的SDK。安装后,我打开 PowerShell(“以管理员身份运行”)命令行窗口并写入这些
我在使用 whenever gem 时遇到了一些问题。我创建了一个 rake 任务,当我自己启动它时它工作得很好但是当我在日志中收到以下消息时尝试自动执行它: ActiveRecord::Statem
我想在 service fabric 集群中为两个不同的 web 应用程序(webpi/website)共享 http/80 端口,应用程序必须有 2 个不同的主机名: mywebapi.com 和
我创建了一个使用 MongoDB 实现 hibernate OGM 的应用程序。它在 Eclipse 中运行得很好,但是,当我构建一个 fat jar 并尝试运行它时,出现以下错误: Exceptio
我有一个 Selenium Python 测试套件。它开始运行,但几分钟后抛出以下错误: Exception AttributeError: "'Service' object has no attr
我按照此链接的说明进行操作:https://www.thegeekdiary.com/centos-rhel-7-how-to-make-custom-script-to-run-automatica
我在 ubuntu 下的 jboss 上部署了简单的“HelloWorld”Web 服务。 我创建了简单的客户端,但我无法让它工作。每次运行客户端时,我都会收到 NullPointerExceptio
我正在尝试为我的网站使用后台定期同步。我正在使用 localhost 并在 1*1000 毫秒时注册 periodicsync 事件,但这根本不会触发。 我看过这个demo ,但即使我将该网站安装为应
我是一名优秀的程序员,十分优秀!