小编av0*_*000的帖子

我正在尝试在更新表中使用的数据后刷新我的Angular Table.

文档说"你可以通过调用renderRows()方法触发对表的渲染行的更新." 但它不像普通的子组件,我可以使用"@ViewChild(MatSort)排序:MatSort;" 因为我不导入它.

如果我导入它并尝试类似@ViewChild('myTable')myTable:MatTableModule; 然后我收到一个错误,指出renderRows()在该类型上不存在.

我怎么称呼这种方法？谢谢!

我的表格代码片段:

<mat-table #table [dataSource]="dataSource" myTable class="dataTable">

我试图通过特定的对象密钥过滤一组数据例如:我有一套技能,我希望看到2级的所有技能.

我已经阅读了文档,这个github示例,以及另一个问题,但我找不到用户输入如何用于按对象键过滤的实际示例.到目前为止,当用户点击技能级别时没有任何反应.

任何指针将不胜感激.

现在我的HTML看起来像:

<mat-button-toggle-group #group="matButtonToggleGroup"
    class="margin-1" (change)=toggleSkillLevel(group.value)>

  <mat-button-toggle value="0">
    0
  </mat-button-toggle>

  <mat-button-toggle value="1">
    1
  </mat-button-toggle>

  <mat-button-toggle value="2">
    2
  </mat-button-toggle>

  <mat-button-toggle value="all">
    ALL
  </mat-button-toggle>

</mat-button-toggle-group>

{{ dataSource.filteredData }}

我的TS看起来像:

 import { Skill, SKILL_DATA } from '../data/skills-details';

...
...

  toggleSkillLevel(level){
    console.log('Only show level ' + level + ' skills...');
    this.dataSource.filterPredicate =
            (data: Skill, filter: string) => data.level == level;
  }

我试图创建一个对话框如图所示的材料设计页面在这里.我可以显示按钮,单击它,对话框显示,页面按预期变暗但没有文本显示.我觉得我很接近,但我无法弄清楚我哪里出错了.任何帮助表示赞赏,谢谢!

这是我的代码:

    import { Component, OnInit } from '@angular/core';
import {MdDialog} from '@angular/material';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(public dialog: MdDialog) { }

  openDialog() {
    this.dialog.open(DialogOverviewExampleDialog);
  }

  ngOnInit() {
  }

}


@Component({
  selector: 'dialog-overview-example-dialog',
  templateUrl: './dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {}

有没有办法让自动填充工作在表单中？我有一个输入地址的表单.我正在使用自动完成(从Material Design的文档中复制)用于状态(这在美国),并且除了所选状态未设置为user.state之外,它正在工作.因此,当我在控制台上注销提交时的myForm.form.value时,它看起来像这样:

user.name : "Test"
user.phone: ...
etc.

用户.state甚至没有出现.

我的(相关)代码:

<md-input-container>
  <input 
    mdInput 
    placeholder="State" 
    [mdAutocomplete]="auto"
    [formControl]="stateCtrl"
    name="user.state" 
    [(ngModel)]="user.state"
  >
</md-input-container>

<md-autocomplete 
    #auto="mdAutocomplete"
>
  <md-option 
    *ngFor="let state of filteredStates | async" [value]="state"
    (onSelectionChange)="selectState(state)"
  >
    {{ state }}
  </md-option>
</md-autocomplete> 

TS:

  constructor(public dialog: MdDialog,) { 
    this.stateCtrl = new FormControl();
    this.filteredStates = this.stateCtrl.valueChanges
        .startWith(null)
        .map(name => this.filterStates(name));
  }

  filterStates(val: string) {
    return val ? this.states.filter(s => new RegExp(`^${val}`, 'gi').test(s))
               : this.states;
  }

即使我尝试使用(onSelectionChange)调用函数selectState(state)来设置user.state,它仍然不会出现在我console.log表单上提交时.

  selectState(value){
    this.user.state = value;
  }

I'm trying to be able to have two different filters for a table of objects. The first one is a normal text/input based filter and works as expected.

The second one I'm trying to get working is a row of checkboxes labeled "Level 1", "Level 2", etc. On checking a checkbox I want to filter by the column "level" all of the currently checked checkboxes. Ideally the user could filter the table by both the text and level selection

I've …

存储用户登录的 AWS Cognito 用户并在中间件中检查该用户是否是验证和保护路由和数据的安全方法？我已经看到了很多使用 Auth0 和 Nuxt 的“auth”模块的方法，但是当我已经使用 AWS 的 Cognito 来处理身份验证时，我不明白这些方法是否有必要。

我可以让 Amplify Authenticator 成功允许他们登录并将返回的用户和​​信息存储到 Vuex 存储 (store.state.auth.user)。

如果我只是使用中间件来全局保护路由，例如：

export default function({store, redirect}){
    if(!store.state.auth.user){
      return redirect('/login')
    }
}

然后在商店中使用相同的“store.state.auth.user”值来查找和检索他们的文件是1.安全2.遵循最佳实践？

我正在使用输入过滤我的表格，并且我想在更新过滤器时将表格重置为第一页。现在表格显示并且过滤工作，但表格页面没有重置。

这是我必须做的：

桌子：

 <ngx-datatable
  class='material'
  [rows]='rows'
  [columns]="columns"
  [columnMode]="'standard'"
  [headerHeight]="75"
  [footerHeight]="50"
  [scrollbarH]="true"
  [rowHeight]="'auto'"
  [limit]="5"
  [selectionType]="'multiClick'"
  [offset]="tableOffset"
  >
</ngx-datatable>

相关TS：

tableOffset = 0;

updateFilter(event, seachCriteria) {

  // Filtering Process...

  // Whenever the filter changes I want to go back to the first page
  this.tableOffset = 0;
}

任何指向我哪里出错的指针？

编辑 所以我尝试将偏移量设置为 1 并发现使用 this.tableOffset = 0 进行重置；确实有效，但是每当我使用箭头导航到不同的页面时，它都会阻止发生重置。

这是一个错误还是我错过了什么？

我正在试图找出如何让我的Angular 2 + Material Design应用程序完全全宽.我知道MD还没有完成,但现在看来我只能手动将body的边距设置为0,这似乎不是一个好的答案.

我尝试通过wiki进行flex-layout,但我想我必须遗漏一些东西.任何帮助将不胜感激,谢谢!

我有一个带有Angular 2的ngx-datatable,它有一些非常长的列名.我想复制他们使用Auto Height for row(链接到文档)所做的事情,但是只会让真正很长的名字换成多行.

通常情况下这不是问题,但是我对Angular的新见感被卡住了.正常的事情,如溢出包装或自动换行似乎不起作用.任何帮助和/或建议将不胜感激.谢谢!

我目前的代码:

  <div class="full-width">
    <ngx-datatable
      class='material'
      [rows]='rows'
      [columns]="columns"
      [columnMode]="'standard'"
      [headerHeight]="150"
      [footerHeight]="50"
      [scrollbarH]="true"
      [rowHeight]="'auto'"
      >
    </ngx-datatable>
  </div>

我将Material示例表复制到我的应用程序的一个选项卡中.如果我在表格中添加分页,它将最初显示为空,直到我点击新页面或页面大小.

这是有意义的,因为文档说"在视图init之后设置分页器,因为该组件将能够查询其初始化分页器的视图." 但我想知道在选项卡内部初始化表的最佳实践是什么,以便我可以使用分页器.

谢谢!

代码:HTML

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; …