我有一个材料自动完成。
我正在调用 ngrx 来提取数据。
//parentcomponent.ts
this.store.select(fromStore.getSearchFormStateMessageTypeListData).subscribe(msgTypeList => {
if (msgTypeList.length > 0) {
console.log('msgtypelist ='+msgTypeList)
for (var i = 0; i < msgTypeList.length; i++) {
this.messageTypeList.push(msgTypeList[i]);
}
}
else {
this.store.dispatch(new fromStore.GetGlobalSearchMessageTypeList({}));
}
})
//parentcomponent.html
<mat-card style="margin: 1px;">
<search-form [messageTypeList]="messageTypeList" (onSearchData)="searchButtonClick($event)" [rowData]="rowData | async">
</search-form>
</mat-card>
Run Code Online (Sandbox Code Playgroud)
从父级我将 msgTypeList 传递给子级。
在孩子中,我将自动完成绑定到列表,但是当我们点击里面时列表没有显示任何内容。
它只在我们在输入框中输入内容时显示选项(过滤选项)
//childcomponent.html
<form [formGroup]="searchForm" id="searchForm" style="width:100%;height:70%" (ngSubmit)="onSubmit()">
<tr>
<td class="input-form" style="padding-right:4%;width:10%">
<mat-form-field>
<input type="text" placeholder="Message Type" aria-label="Assignee" formControlName="msgType" matInput [matAutocomplete]="autoMsgType">
<mat-autocomplete #autoMsgType="matAutocomplete" placeholder="Message Type" [displayWith]="displayMessageTypeFn">
<mat-option *ngFor="let messageType of filteredMessageTypeList …Run Code Online (Sandbox Code Playgroud) 我正在使用 将file-saver文件保存在客户端浏览器上。但是,文件是直接下载的。
const blob = new Blob([data.body], {type: 'application/'pdf});
FileSaver.saveAs(blob, 'export.pdf')
Run Code Online (Sandbox Code Playgroud)
如何提示“另存为”窗口,以便用户可以使用自己的名称和位置进行保存。
我看到了一些关于更改浏览器设置的答案,但想知道代码中是否file-saver有 api 或任何调整可以提示窗口。
注意:-文件保护程序另存为 API 上的资源不多(如果不是浏览器设置。
我需要在标题标签左侧和右侧的标题中对齐文本内容。我尝试了不同的想法,但没有一个适合我。帮我。
<div style="width: 40%">
<mat-card>
<mat-card-header class="card-container">
<mat-card-title class="card-container-right"> Test right</mat-card-title>
<mat-card-title class="card-container-left"> Test left</mat-card-title>
</mat-card-header>
<mat-card-content>
</mat-card-content>
</mat-card>
</div>
Run Code Online (Sandbox Code Playgroud) 我正在尝试按属性过滤掉有效负载数据。
//reducer.ts
case MessagesActionTypes.LOAD_Message_SUCCESS: {
console.log('reducer='+
JSON.stringify(action.payload.Messages));//receiving data here
return adapter.addAll(action.payload.Messages, state);
}
export const getSelectedMessageId = (state: MessageState) => state.selectedMessageId;
// get the selectors
const { selectIds, selectEntities, selectAll, selectTotal } = adapter.getSelectors();
// select the array of Messages
export const selectAllMessages = selectAll;
Run Code Online (Sandbox Code Playgroud)
下面是选择器
// Selector.ts
export const selectHomeQueues = createSelector(
fromReducer.selectAllMessages,
(messages) => messages.filter(message => message.queue === 'HOME')
);
Run Code Online (Sandbox Code Playgroud)
我正在减速器中接收数据,但在运行时选择器中出现错误ERROR TypeError: Cannot read property 'map' of undefined
注意:我在任何地方都找不到任何有关 NGRX 实体选择器中过滤的示例。
我们如何过滤 NGRX 实体中的选择器?
我有一个mat-button-toggle-group,其中有5个mat-button-toggle。我需要在点击或更改val时触发一个事件,尽管我更喜欢将其作为点击事件。
此处提供的文档显示没有单击事件,但是有更改事件。
我也尝试过change事件(如下所示),但未触发该事件。
<mat-button-toggle-group #group="matButtonToggleGroup" [(ngModel)]="rowAction">
<mat-button-toggle value="raw_swift_msg" (change)="onValChange(value)" matTooltip="View Message">
<i class="fa fa-eye" style="color:#455A64" aria-hidden="true"></i>
</mat-button-toggle>
<mat-button-toggle value="message_comment" matTooltip="Message Comment">
<i class="fa fa-comments" style="color:#455A64" aria-hidden="true"></i>
</mat-button-toggle>
<mat-button-toggle value="link_trade" hasAccess id="LinkMessagePopup" matTooltip="Link Message">
<i class="fa fa-link" style="color:#455A64" aria-hidden="true"></i>
</mat-button-toggle>
<mat-button-toggle value="audit_trail" matTooltip="View Audit">
<i class="fa fa-history" style="color:#455A64" aria-hidden="true"></i>
</mat-button-toggle>
<mat-button-toggle hasAccess id="MessagePopup" value="move_message" matTooltip="Move message">
<i class="fa fa-exchange" style="color:#455A64" aria-hidden="true"></i>
</mat-button-toggle>
<mat-button-toggle value="log" matTooltip="View log">
<i class="fa fa-book" style="color:#455A64" aria-hidden="true"></i>
</mat-button-toggle>
</mat-button-toggle-group>
Run Code Online (Sandbox Code Playgroud)
在我的.ts文件中
从'@ angular / material / button-toggle'导入{MatButtonToggleModule}; …
我有一个ag-grid,它通过restful调用从后端提取数据,并通过NGRX模式进行路由。
<ag-grid-angular #agGrid class="ag-theme-fresh" style="width: 100%; height: 100%;" [gridOptions]="gridOptions"
[rowData]="rowData"
[pagination]="true" [paginationAutoPageSize]='true' [enableSorting]="true"
[rowSelection]="rowSelection" [enableColResize]="true"
[enableFilter]="true" [rowClassRules]="rowClassRules" (rowClicked)="onRowClicked($event)"
(cellClicked)="onCellClicked($event)"
(gridReady)="onReady($event)">
</ag-grid-angular>
Run Code Online (Sandbox Code Playgroud)
我有2个场景,其中网格加载了数据。
场景1:我第一次在页面加载时加载它(通过ngrx store)
this.QueueItems$ = this.store.select(fromStore.getQueueItems);
Run Code Online (Sandbox Code Playgroud)
场景2:第二次,我有一个按钮,用于刷新另一个商店中网格中的数据。
<button mat-icon-button matTooltip="Refresh Grid"
(click)="handleOnGridRefesh($event)" matTooltipPosition="left"
style="right: 2%;top: 0;margin-top: 7px;position: absolute;z-index:4">
<i class="fa fa-refresh" style="color:#455A64" aria-hidden="true"></i>
</button>
//note:getQueueItemsStore is a different store ( ngrx) from getQueueItems
handleOnGridRefesh($event: any) {
this.QueueItems$ = this.store.select(fromStore.getQueueItemsStore);
}
Run Code Online (Sandbox Code Playgroud)
我的问题是,单击按钮刷新网格后,ag网格提取数据并显示“没有要显示的行”覆盖,这是500ms到1秒的短暂时间延迟。
如何在没有如图所示的中间覆盖的情况下平稳过渡?
我有一个打字稿POJO如下
export interface Items {
firstName?: String;
lastname?: String;
Address?: String;
phoneNumber?: number;
city?: String;
state?: String;
zipcode?: number;
accountId?: number;
status?: String;
approvalStatus?: String;
txId?: number;
rxId?: number;
txBankname?: String;
rxBankName?: String;
txCcy?: String;
rxCcy?: String;
txCcyAmt?:number;
rxCcyAmt?:number;
txDate?:date;
rxDate?:date;
}
Run Code Online (Sandbox Code Playgroud)
在我的html文件中,我有一个包含POJO上面所有字段的表单.当用户选择一个字段时,pojo会填充输入的文本.
但是,用户可以选择将多个字段保留为空,并且对象中的属性将为null.
所以在提交按钮点击时,当我检查POJO时,它如下面的screeshot.
我想用仅填充的值填充另一个数组(不是空值属性).
this.anotherArray = [ {name:firstName, value:"Andy"},{name:lastName, value:"Smith"}]
Run Code Online (Sandbox Code Playgroud)
我需要将它用于ngFor List来显示角度材料芯片
我们如何以非常优化的方式做到这一点.
编辑:我的问题是关于检查对象中的空属性,重复的问题引用是一个数组.即使答案也有不同的方法.我的问题的方法是使用Object.entries,而重复的引用有一个使用map和Object.keys的方法
我正在使用JSFiddle的这个片段 而且我无法将箭头从左侧移动到右侧.
我尝试修改bubble:before,我让箭头切换到右边.但我现在遇到的问题反映了它!谢谢
我有一个表单,仅当值不等于 0 时,我才想实现 MAXLENGTH 验证。
那么有parameter.valueMaxlength === 0 { then dont execute maxlength validation }
没有办法把这个逻辑写在html文件中呢。
<mat-form-field *ngSwitchCase="'TEXTBOX'" class="example-full-width">
<input
matInput
[placeholder]="parameter.displayName"
[formControlName]="parameter.id"
[id]="parameter.id"
[type]="parameter.dataType"
[maxlength] = "parameter.valueMaxlength"
/>
</mat-form-field>
Run Code Online (Sandbox Code Playgroud) forms maxlength angular angular-reactive-forms angular2-form-validation
angular ×8
typescript ×4
html ×3
javascript ×2
ngrx ×2
ag-grid ×1
alignment ×1
angular6 ×1
arrays ×1
autocomplete ×1
css ×1
filesaver.js ×1
filter ×1
forms ×1
list ×1
mat-card ×1
maxlength ×1
ngrx-entity ×1
ngrx-store ×1
object ×1
right-align ×1
rxjs ×1
save-as ×1
window ×1