小编pra*_*lli的帖子

单击时材料自动完成不显示列表

我有一个材料自动完成。

我正在调用 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)

autocomplete list angular-material angular angular6

7
推荐指数
2
解决办法
8197
查看次数

Angular File-saver:如何提示“另存为”窗口而不直接保存

我正在使用 将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 上的资源不多(如果不是浏览器设置。

window save-as typescript filesaver.js angular

5
推荐指数
1
解决办法
1056
查看次数

如何在角4中对齐左右文本mat-card-header?

我需要在标题标签左侧和右侧的标题中对齐文本内容。我尝试了不同的想法,但没有一个适合我。帮我。

 <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)

html alignment angular-material angular mat-card

4
推荐指数
2
解决办法
6430
查看次数

Angular 和 NGRX:使用 NGRX 实体对选择器进行过滤

我正在尝试按属性过滤掉有效负载数据。

 //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 实体中的选择器?

filter typescript ngrx angular ngrx-entity

4
推荐指数
1
解决办法
8052
查看次数

垫按钮切换的更改或单击事件

我有一个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}; …

html javascript typescript angular-material angular

3
推荐指数
2
解决办法
1万
查看次数

在Ag-Grid中加载数据时如何避免出现“无行”消息

我有一个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秒的短暂时间延迟。

如何没有如图所示的中间覆盖的情况下平稳过渡

rxjs ag-grid ngrx angular ngrx-store

2
推荐指数
1
解决办法
3807
查看次数

从Javascript/typescript对象的非null属性创建数组

我有一个打字稿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.

示例POJO

我想用仅填充的值填充另一个数组(不是空值属性).

  this.anotherArray = [ {name:firstName, value:"Andy"},{name:lastName, value:"Smith"}]
Run Code Online (Sandbox Code Playgroud)

我需要将它用于ngFor List来显示角度材料芯片

我们如何以非常优化的方式做到这一点.

编辑:我的问题是关于检查对象中的空属性,重复的问题引用是一个数组.即使答案也有不同的方法.我的问题的方法是使用Object.entries,而重复的引用有一个使用map和Object.keys的方法

javascript arrays object typescript angular

1
推荐指数
1
解决办法
2273
查看次数

将聊天箭头从左侧移动到右侧

我正在使用JSFiddle的这个片段 而且我无法将箭头从左侧移动到右侧.

我尝试修改bubble:before,我让箭头切换到右边.但我现在遇到的问题反映了它!谢谢

html css css-selectors right-align

1
推荐指数
1
解决办法
54
查看次数

如何以 html Angular 形式执行条件验证

我有一个表单,仅当值不等于 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

1
推荐指数
1
解决办法
2608
查看次数