小编Neh*_*hal的帖子

有没有办法让自动填充工作在表单中？我有一个输入地址的表单.我正在使用自动完成(从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;
  }

我创建了一个带有角度材料的角度4应用示例.我正试图将卡片放在视图中心.但它不起作用.Below是代码

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<router-outlet></router-outlet>

login.component.html

<div  ng-cloak=""  layout-fill layout="column" style="background:green" layout-align="center">
    <div flex="50" layout="row" layout-align="center">
      <md-card flex="50"></md-card>
    </div>
</div>

login.component.ts

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

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

  constructor() { }

  ngOnInit() {
  }

}

对不起,我在这个黑暗中.

我有一个方法返回一个对象数组,我使用该对象数组来显示一个表.这是我正在使用的功能:

getCompetitions(): Promise<Competition[]> {
    let options: RequestOptionsArgs = {};
    let params = new URLSearchParams();
    params.append('size', '250');
    options.params = params;
    return this.http.get(this.competitionsUrl,options)
               .toPromise()
               .then(response => response.json()._embedded.competitions as Competition[])
               .catch(this.handleError);
  }

我的ngOnInit()方法在启动时调用该函数并获得一个使用ngFor迭代的竞争数组,我正在创建表而没有问题.

我想要的是实现md-table或cdk-table组件.我使用该UI库完成了应用程序的其余部分.

• 我知道我的进口是正确的.
• HTML似乎很好,因为我显示了单个标题
• 控制台中没有错误,但competitionsDataSource似乎是空的.

我在下面添加我的文件,我知道问题在于实现或我是如何尝试填充dataSource的.

这是比赛课程:

export class Competition {
  compName: string;
  compStart: Date;
  compEnd: Date;
  compFull: number;
  compTeamCount: number;
  compChamp: number;
  compRunnerup: number;
  compType: number;
  compCountry: string;
  _links: {
    self: {
      href: string;
    },
    matches: {
      href: string;
    }
  }
} …

图书馆:角度材料(材料2)

我想使用MdInputContainer的floatPlaceholder指令,以便占位符/提示永远不会浮动.

我没有看到它在文档中指出它所期望的值的位置:

@Input()floatPlaceholder:占位符是否应始终浮动,永远不会浮动或浮动,因为用户键入.

取自:https://material.angular.io/components/input/api

<md-input-container [floatPlaceholder]="false"> <input type="text" mdInput placeholder="Search..." </md-input-container>

我试过false和"never"该值作为我最好的猜测,但也阻止了占位符从浮在上面输入.

我不明白为什么即使我使用ChangeDetectionStrategy.OnPush和changeDetectorRef.detach()函数ngDoCheck一直被调用.我的应用程序中有数千个组件,如果从child2引发了一个事件(鼠标点击等),我想阻止child1的changeDetection.

这是一个掠夺者

如你所见,我有一个父组件

@Component({
  selector: 'my-app',
  template: `     
    <app-child1 test="test"></app-child1>
    <app-child2 test="test"></app-child2> `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  test = 'test';

constructor() { }

  ngDoCheck() {
    console.log("### ngDoCheck app component");
  }
}

和2个相同的孩子:

@Component({
  selector: 'app-child1',
  template: `<input type="text" [(ngModel)]="test" /><br/> `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class Child1Component implements OnInit {
  @Input()
  test: string;

  constructor(public cd: ChangeDetectorRef) { }

  ngAfterViewInit() {
      console.log("###### DETACH child 1");
      this.cd.detach();

  }

  ngDoCheck() {
    console.log("### ngDoCheck child 1");
  }
}

如果我开始输入child1的输入,则调用child2的ngDoCheck函数.

想想有成千上万的孩子,它真的很慢...... …

我有以下路线定义：

export const AppRoutes = RouterModule.forRoot([
{
    path: '',
    canActivate: [AuthGuardService],
    component: HomeComponent,
    children: [
        {
            path: 'child1',
            component: Child1Component
        },
    ]
},
]);

路由会child1从其父级继承 canActivate 防护吗？

我正在尝试使用md-table实现排序,过滤和分页.这是我的代码:

connect(): Observable<Patient[]> {
const displayPatientDataChanges = [
  this._patientDatabase.dataChange,
  this._filterPatientChange,
  this._paginator.page,
  this._sort.mdSortChange,
];

return Observable.merge(...displayPatientDataChanges).map(() => {
  const startIndex = this._paginator.pageIndex * this._paginator.pageSize;

  let displayData = this._patientDatabase.data.slice().filter((item: Patient) => {
    let searchStr = (item.firstname + ' ' + item.lastname).toLowerCase();
    return searchStr.indexOf(this.filter.toLowerCase()) != -1;
  });

我想返回这两个值,但它只返回过滤器和分页不起作用的排序函数.

  return displayData.splice(startIndex, this._paginator.pageSize),this.getSortedData();


});

}

 disconnect() { }

getSortedData(): Patient[] {
const data = this._patientDatabase.data.slice();
if (!this._sort.active || this._sort.direction == '') { return data; }

return data.sort((a, b) => {
  let propertyA: number|string|Date = ''; …

我正在使用https://material.angular.io，特别是对话框（https://material.angular.io/components/dialog/overview）。我的问题是当我使用定位对话框时

config = {'width':'200px', 'height':'400px', position: {'top':'150px', 'left':'400px'}}

我注意到，当我单击按钮显示对话框时，它会一直向下滚动...是否有某种方法可以使当我单击按钮显示对话框时，它保持在顶部/滚动到顶部？

我正在尝试在md表中使用ng-if，但出现错误：

Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * 

这是我的模板代码

<md-row *cdkRowDef="let row;  columns: displayedColumns" (click)="viewNarrative(row)">
  <md-cell *cdkCellDef="let row" *ngIf="!(authService.isAdmin())">
    <button md-button (click)="viewNarrative(row)"><md-icon>toc</md-icon> Narrative</button>
    <button md-button (click)="editDemographics(row)"><md-icon>edit</md-icon> Demographics</button>
    <button md-button (click)="confirmDelete(row, $event)" style="line-height:normal"><md-icon>delete</md-icon> Delete</button>
  </md-cell>
</md-row>

当我删除*cdkCellDef="let row"指令时，我得到了错误：ERROR Error: No provider for CdkColumnDef! 那么我该如何实现ng-if指令呢？

我正在使用Material 2来创建菜单.我有一个md按钮触发器打开一个md菜单.我希望按钮在悬停时打开.我知道Material Angular.io仍然很新.我已经用Google搜索了问题,但我想出了Angularjs的结果.谁能指出我正确的方向？

这是我的html示例:

    <button md-button [mdMenuTriggerFor]="userMenu" class="nav-btn" ><i class="fa fa-user" aria-hidden="true" id="user-icon"></i> NAME</button>
    <md-menu #userMenu="mdMenu" xPosition="before" yPosition="below" [overlapTrigger]="false">
        <button md-menu-item class="nav-dropdown" [routerLink]="['/dashboard']">DASHBOARD</button>
        <button md-menu-item class="nav-dropdown">MY PROFILE</button>
        <button md-menu-item class="nav-dropdown">lOGOUT</button>
    </md-menu>