这次我需要有关如何在单击删除按钮时根据 html-table 中的行 ID 删除行的帮助。表数据源来自单独的Json文件。
该表如下所示： 图片链接
<div class="container">
<table border=1 class="table">
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Age</th>
<th>Phone</th>
</tr>
<tr *ngFor="let d of data | async" [attr.id]="d.id"> <!--each row id == id-->
<td>{{ d.id }}</td>
<td>{{ d.name }}</td>
<td>{{ d.email }}</td>
<td>{{ d.age }}</td>
<td>{{ d.phone }}</td>
<button id="remove">DELETE ROW</button>
</tr>
</table>
</div>如果需要更多片段，请告诉我。谢谢。
我正在尝试使用[disable]=form.controls[...].invalid条件检查禁用提交按钮.如果输入字段为空或者,则应禁用提交按钮invalid.但看起来我做错了.当我填充某些字段并将某些字段留空时,该按钮被禁用,第一个输入字段除外.当我填充第一个输入字段时,该按钮变为启用状态(而其他输入字段仍为空或invalid).
//component.ts
form01: FormGroup;
public myDatePickerOptions: IMyDpOptions = {
dateFormat: 'dd-mmm-yyyy',
};
setDate(): void {
let date = new Date();
this.form01.patchValue({
DoB: {
date: {
year: date.getFullYear(),
month: date.getMonth() + 1,
day: date.getDate()
}
}
});
}
clearDate(): void {
this.form01.patchValue({
DoB: null
});
}
constructor(public builder: FormBuilder) {
this.form01 = this.builder.group({
email: [null, Validators.required], //text
DoB: [null, Validators.required], //radio button
gender: [null, Validators.required], //date picker
});
}
results: object = new Object();
functionForm01() …我正试图从这个链接学习ng2智能表,我收到了这个错误.
未捕获错误:模块'AppModule'声明的意外模块'Ng2SmartTableModule'.请添加@ Pipe/@ Directive/@ Component注释.
这是app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
//templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
//template: `<ng2-smart-table [settings]="settings"></ng2-smart-table>`
})
export class AppComponent {
//title = 'app';
settings = {
columns: {
id: {
title: 'ID'
},
name: {
title: 'Full Name'
},
username: {
title: 'User Name'
},
email: {
title: 'Email'
}
}
};
}和app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Ng2SmartTableModule } from …我正在尝试按照此链接为表创建排序函数和管道，这是该示例的plunker。从我跟随表标题的示例来看，应该是可点击的并执行该sort()功能。我的管道名称是prdSort. 我也在使用，ngx-pagination但我认为这不是此错误的主要原因。
//part of service.ts
productList: AngularFireList < any > ;
//end
//component.ts
productList: Product[];
isDesc: boolean = false;
column: string = 'prdName';
records = this.productList
sort(property) {
this.isDesc = !this.isDesc; //change the direction
this.column = property;
let direction = this.isDesc ? 1 : -1;
};<!-- table header -->
<th (click)="sort('prdName')">Name</th>
<!--table row-->
<tr *ngFor="let product of productList | paginate: { itemsPerPage: 3, currentPage: p } | …angular ×4
html ×2
html-table ×2
typescript ×2
components ×1
form-control ×1
pipe ×1
sorting ×1