每次选择文件时,我都会尝试触发onchange事件.如果我选择的文件不同,它会触发,但是,即使选择了两次相同的文件,我也想要触发.
HTML
<input name="file" type="file" (change)="onChange($event)" style="width:80%" />
零件
onChange(event: any) {
var files = event.srcElement.files;
this.files = files;
event= null;
}
我正在使用 primeng 下拉菜单，并且很难将我的对象添加到下拉菜单中。它确实用空项目填充下拉列表..不知道如何指定字段名称。
超文本标记语言
<div class="form-group col-xs-3 col-md-3"
[ngClass]="{
'has-error':((ersaForm.get('costCenter').touched || ersaForm.get('costCenter').dirty ) &&
!ersaForm.get('costCenter').valid) || (ersaForm.get('costCenter').value.cost_center_name == '')
}">
<label for="costCenterId" class="control-label">Cost Center</label>
<p-dropdown [options]="iCostCenter" styleClass="form-control" formControlName="costCenter" placeholder="Cost Center (required)" id="costCenterId" name="costCenter" dataKey="cost_center_id">
</p-dropdown>
目的
{
"result": [
{
"cost_center_id": 0,
"cost_center_name": "0"
},
{
"cost_center_id": 1,
"cost_center_name": "1"
},
{
"cost_center_id": 2,
"cost_center_name": "2"
},
}
TS
export interface ICostCenter{
cost_center_id: string,
cost_center_name: string
}
iCostCenter: ICostCenter[];
this._appParams.getAllCostCenters()
.subscribe(
data => {
this.iCostCenter = data.result;
}
我的welcome.component包含菜单和选项卡，一旦我单击菜单项routerlink不会启动新请求，因此，不会重新加载选项卡组件。选项卡组件由多个路由器链接调用，应每次重新加载。
welcome.component.html
<nav-menu></nav-menu>
<tab><tab>
navMenu.component.html
第一次URL = http：// localhost：xxxx / welcome
一旦我单击了navMenu.component.html中的项目，URL确实更改为 http：// localhost：53620 / tab / 2
但是，tab.component需要触发ngOnInt以重新加载ID 2的数据。
<ul class="list-unstyled list" *ngFor='let menu of menues'>
<li><a [routerLink]="['/tab',menu.LinkTabID]" class="anchorLink"><i class="icon-home scolor" ></i><font color="white">{{menu.Name}}</font></a></li>
</ul>
tab.component.html
<div class="row left" *ngFor='let control of tabControls; let i = index' style="padding-bottom:3px">
<div class="col-lg-2 text-left" style="border:0px dotted">
{{control.DropDownTitle}}:
</div>
<div class="col-lg-pull-3 text-left">
<select name="{{control.DropDownTitle}}" [(ngModel)]="selected[i]" style="width:80%" required>
<option value="" selected>Select</option>
<option *ngFor='let controlList of control.DropdownValues' [ngValue]="controlList.Value">
{{controlList.Value}}
</option>
</select>
</div>
</div>
app.module
RouterModule.forRoot([
{ …我在表中使用 p-autoComplete，一旦选择了一行，我的自动完成应该预先选择当前值。我尝试使用 [(ngModel)]="row.bsaName" 但它不起作用。（单击下拉菜单后，我会看到所有值，我确认这些值确实存在于我的 p-autoComplete 下拉菜单中）
另请注意，我使用了 p-calendar，一旦单击编辑，我就可以预先选择当前日期，并且不确定为什么自动完成不同
人TML
<p-table #dt [value]="iBsaFollowup" dataKey="id" [paginator]="true" [rowsPerPageOptions]="[10,50,100]"
[rows]="10">
<ng-template pTemplate="header">
<tr>
<th>ID</th>
<th>Followup DT</th>
<th>Comment</th>
<th>BSA Name</th>
<th>Action</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row>
<tr>
<td>{{row.ID}}</td>
<td>
<div *ngIf="!row.isBSAEditable">{{row.followupDate}}</div>
<div *ngIf="row.isBSAEditable">
<p-calendar name="followupDate" [(ngModel)]="row.followupDate" [showIcon]="true"></p-calendar> <span style="margin-left:35px"></span>
<span *ngIf="isEmpty(row.comment)" style="color:crimson; font-size:8pt">Required</span>
</div>
</td>
<td>
<div *ngIf="!row.isBSAEditable">{{row.comment}}</div>
<div *ngIf="row.isBSAEditable">
<input type="text" [(ngModel)]="row.comment" style="width:95%" maxlength="200">
<span *ngIf="isEmpty(row.comment)" style="color:crimson; font-size:8pt">Required</span>
</div>
</td>
<td>
<div *ngIf="!row.isBSAEditable">{{row.bsaName}}</div>
<div *ngIf="row.isBSAEditable">
<p-autoComplete name="bsaNameList" [(ngModel)]="row.bsaName" [suggestions]="iBsaList" (completeMethod)="searchBsaList($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" …typescript primeng angular primeng-datatable primeng-dropdowns
我有包含以下数据的数据表
Number Type Order count
1 1 R 1
1 1 R 1
1 1 R 1
1 2 R 1
我希望得到这个结果
Number Type Order count
1 1 R 3
1 2 R 1
如何按三列分组
var result = dt.AsEnumerable()
.GroupBy(x => {x.Field<string>("Number"))//need to group by Type and order also need to sum te total counts
我正在将 PrimeNG DataTable 与 Angular 一起使用，并尝试实现类似于此StackBlitz 的内容。
如何在我尝试编辑的行上添加必填字段验证器？基本上，当他们编辑评论时，我需要确保他们输入了文本。
HTML
<p-table #dt [value]="iToDoList" dataKey="ID" [paginator]="true" [rowsPerPageOptions]="[10,50,100]" [rows]="10">
<ng-template pTemplate="header">
<tr>
<th>ID</th>
<th>Comment</th>
<th>Action</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row>
<tr>
<td>{{row.ID}}</td>
<td>
<div *ngIf="!row.isEditable">{{row.Comment}}</div>
<div *ngIf="row.isEditable">
<input type="text" [(ngModel)]="row.comment">
</div>
</td>
<td><button (click)="editRow(row)">Edit</button></td>
<td>
<button (click)="save(row)">Save</button>
</td>
</tr>
</ng-template>
</p-table>
组件.ts
iToDoList: IToDoList[] = null;
ngOnInit(): void {
this.GetToDoList(this.userID);
}
GetToDoList(ID: string) {
this._dashboardService.getToDoList(ID)
.subscribe(
data => {
this.iToDoList = data.result;
data.map(row => {
row.isEditable = false;
});
},
error …我为电话字段编写了一个自定义验证器并收到
错误
预期验证器返回 Promise 或 Observable。
为简单起见，我只需要检查电话号码是否少于 10 个字符
html
<div class="form-group col-xs-3 col-md-3"
[ngClass]="{
'has-error':(ersaForm.get('phone').touched || ersaForm.get('phone').dirty ) &&
!ersaForm.get('phone').valid
}">
<label for="phoneId" class="control-label">Phone</label><br />
<p-inputMask mask="(999) 999-9999" formControlName="phone" inputStyleClass="form-control" [style]="{'width': '100%','height':'34px'}" id="phoneId" placeholder="Phone (required)"></p-inputMask>
<span class="help-block" *ngIf="(ersaForm.get('phone').touched || ersaForm.get('phone').dirty ) &&
ersaForm.get('phone').errors">
<span *ngIf="ersaForm.get('phone').errors.phonePBXCheck">
invalivd Phone Number.
</span>
</span>
</div>
TS
function phoneCheck(phone: string): ValidatorFn{
return (c: AbstractControl): { [key: string]: boolean } | null => {
var phoneVal = c.value;
phoneVal = phoneVal.replace('(', '');
phoneVal = phoneVal.replace(')', …validation typescript primeng angular angular-reactive-forms
我不知道如何在 Angular 2 中的元素内显示数据集合。
json
[
{
"DropdownValues": [
{
"ID": 1,
"Value": "January"
},
{
"ID": 2,
"Value": "February"
},
{
"ID": 3,
"Value": "March"
}
],
"DropDownID": 1,
"DropDownTitle": "Month",
"IsMonth": true,
"IsYear": false,
"IsCompay": false,
"IsCompanyName": false
}
]
我能够在调用我的服务时将其加载到界面中
export interface ITabControls {
DropdownValues: {
DropDownID: number;
DropDownMappingID: number;
Value: string;
}
DropDownID: number;
DropDownTitle: string;
IsMonth: boolean;
IsYear: boolean;
IsCompay: boolean;
IsCompanyName: boolean;
}
选项卡组件.ts
@Component({
selector: 'tab',
moduleId: module.id,
templateUrl: 'tab.component.html'
})
export class …我正在尝试按字母顺序对对象数组进行排序，为了使事情变得简单，我正在使用以下示例。在我的打字稿中，我进行拼接以从数组对象中插入和删除项目。
大批
cars = [{
id: 1,
items: [{
name: 'car1',
description: 'this is car1 description'
},{
name: 'car2',
description: 'this is car2 description'
},{
name: 'car3',
description: 'this is car3 description'
},{
name: 'car4',
description: 'this is car4 description'
},{
name: 'car5',
description: 'this is car5 description'
}]
}];
html
<p-dataView [value]="cars" [paginator]="true" [rows]="5">
<p-header>List of Cars</p-header>
<p-footer>Choose from the list.</p-footer>
<ng-template let-car pTemplate="listItem">
<p-fieldset legend="Header" *ngIf="car.id === 1" [toggleable]="true">
<div *ngFor="let _car of car.items">
{{_car.name}} - {{_car.description}}
</div> …