小编Veg*_*ega的帖子

我对自己的表格有点疑惑.

我做了一个自定义元素:

<div formControlName="surveyType">
  <div *ngFor="let type of surveyTypes"
       (click)="onSelectType(type)"
       [class.selected]="type === selectedType">
    <md-icon>{{ type.icon }}</md-icon>
    <span>{{ type.description }}</span>
  </div>
</div>

我尝试添加formControlName但有角度不想知道任何事情,只是说:

<div formControlName="surveyType">
  <div *ngFor="let type of surveyTypes"
       (click)="onSelectType(type)"
       [class.selected]="type === selectedType">
    <md-icon>{{ type.icon }}</md-icon>
    <span>{{ type.description }}</span>
  </div>
</div>

我试图添加ngDefaultControl但没有成功.这似乎是因为没有输入/选择...但我不知道该怎么做.

我想将我的点击绑定到这个formControl,以便当有人点击整个卡片时将我的'type'推入formControl.可能吗？

如果表单有效,是否应禁用"提交"按钮？最佳实践？

angular2是否具有可以在"提交"按钮上使用的ng-disabled？(ng-disabled对我不起作用.)

我创建了一个自定义组件,我放在一个for循环中,例如

<div *ngFor="let view of views">

     <customcomponent></customcomponent>

</div>

其输出将是:

<customcomponent></customcomponent>
<customcomponent></customcomponent>
<customcomponent></customcomponent>

我想知道当这些组件的数量可以变化时,如何使用@viewchild语法或任何其他方法来获取对这些组件的引用

当组件可以给出一个名称,例如

<customcomponent #compID></customcomponent>

我可以参考如下:

@ViewChild('compID') test: CustomComponent

如果不是这种情况,我如何引用它,例如可能使用索引？

(此问题与使用ElementRef无关,因为之前已经提到的其他问题可以通过下面列出的答案看到)此问题涉及访问多个@ViewChild和使用列表查询.

我正在使用角度5.我有一个仪表板,我有几个部分内容很少,几个部分内容如此之大,以至于我在更换路由器时遇到问题.每次我需要滚动到顶部.任何人都可以帮助我解决这个问题,以便当我更改路由器时,我的视图始终保持在顶部.

提前致谢.

我是角色4的新手.我想要实现的是为我的应用程序中的不同页面设置不同的布局页眉和页脚.我有三种不同的情况:

1. 登录,注册页面(无标题,无页脚)

路线:['登录','注册']

2. 营销网站页面(这是根路径,它有一个页眉和页脚,大多数这些部分在登录前到来)

路线:['','关于','联系']

3. 应用程序登录页面(我在本节中对所有应用程序页面都有不同的页眉和页脚,但此页眉和页脚与市场营销网站页眉和页脚不同)

路线:['仪表板','个人资料']

我通过在路由器组件html中添加页眉和页脚来临时运行应用程序.

请告诉我一个更好的方法.

这是我的代码:

应用程序\ app.routing.ts

   const appRoutes: Routes = [
        { path: '', component: HomeComponent},
        { path: 'about', component: AboutComponent},
        { path: 'contact', component: ContactComponent},
        { path: 'login', component: LoginComponent },
        { path: 'register', component: RegisterComponent },
        { path: 'dashboard', component: DashboardComponent },
        { path: 'profile', component: ProfileComponent },


        // otherwise redirect to home
        { path: '**', redirectTo: '' }
    ];

    export const routing = RouterModule.forRoot(appRoutes);

app.component.html

<router-outlet></router-outlet>

应用程序/家/ home.component.html

<site-header></site-header>
<div class="container"> …

如何更改下面的Angular Material代码,以便数据表按'name'列排序,默认按升序排序.必须显示箭头(表示当前排序方向).

这就是我想要实现的目标:

原始代码:

<table matSort (matSortChange)="sortData($event)">
  <tr>
    <th mat-sort-header="name">Dessert (100g)</th>
    <th mat-sort-header="calories">Calories</th>
    <th mat-sort-header="fat">Fat (g)</th>
    <th mat-sort-header="carbs">Carbs (g)</th>
    <th mat-sort-header="protein">Protein (g)</th>
  </tr>

  <tr *ngFor="let dessert of sortedData">
    <td>{{dessert.name}}</td>
    <td>{{dessert.calories}}</td>
    <td>{{dessert.fat}}</td>
    <td>{{dessert.carbs}}</td>
    <td>{{dessert.protein}}</td>
  </tr>
</table>

我正在尝试这样的东西,但它不起作用(没有箭头显示,没有排序)

<table matSort (matSortChange)="sortData($event)" matSortActive="name" matSortStart="asc" matSortDisableClear>

这是Plunker的链接

如何设置mat-select的面板组件的样式.从我得到的文档,我需要提供panelClass所以我这样做:

<mat-form-field>
  <mat-select placeholder="Search for"
    [(ngModel)]="searchClassVal"
    panelClass="my-select-panel-class"
    (change)="onSearchClassSelect($event)">
    <mat-option *ngFor="let class of searchClasses" [value]="class.value">{{class.name}}</mat-option>
  </mat-select>
</mat-form-field>

我在开发人员工具中检查过这个类是否附加到DOM中的面板并附加了它.所以我将自定义scss类附加到此元素.现在,当我提供CSS时,它只是不起作用.我的scss例如如下所示:

.my-select-panel-class {
    width:20px;
    max-width:20px;
    background-color: red;
    font-size: 10px;
}

面板的宽度始终等于widthselect元素的宽度.有时在选项中你有太长的字符串,我想让它更广泛.有什么方法可以做到这一点.我的组件中的风格甚至background-color无法正常工作.有人知道为什么这么奇怪吗？

我正在使用:Angular 4.4.5 @ angular/material:2.0.0-beta.12

我正在使用带有sidenav的angular2-material制作一个新的angular2应用程序.我不能为我的生活得到那个高度为100%的sidenav.我正试图让一个菜单滑出来占据屏幕的整个高度.无论用户在哪里滚动,我都希望它以相同的方式打开.

这是我的模板:

<md-sidenav-layout class="demo-sidenav-layout">
  <md-sidenav #start mode="over">

    <a [routerLink]="['/login']" class="btn btn-primary">Log in</a>
    <br>
  </md-sidenav>
    <md-toolbar color="primary">

      <button md-button (click)="start.toggle()">Open Side Drawer</button>
      <span>Spellbook</span>

      <span class="demo-fill-remaining">

      </span>

    </md-toolbar>
  <div class="demo-sidenav-content">

    <router-outlet></router-outlet>
  </div>
</md-sidenav-layout>

这是我的CSS:

.demo-sidenav-layout {
  //border: 3px solid black;
  min-height:100%;
  md-sidenav {
    padding: 10px;
    background: gainsboro;
    min-height: 100%;
  }
}

.demo-sidenav-content {
  padding: 15px;
  min-height:100%;
}

.demo-toolbar {
  padding: 6px;

  .demo-toolbar-icon {
    padding: 0 14px 0 14px;
  }

  .demo-fill-remaining {
    flex: 1 1 auto;
  }

}

我也html设置height:100%并 …

在我的网站上,我有一个带有此文字阴影的标题:

h1.title {
 text-shadow: -1px 1px 10px rgba(0, 0, 0, 0.75)
 }

<h1 class="title">title</h1>

我想在我的本机应用中做同样的事情.

我见过这些属性:

textShadowColor color
textShadowOffset {width: number, height: number}
textShadowRadius number

但我不知道如何获得与html相同的效果.

我能怎么做？

如果将md-sort-header添加到md-table中的md-header-cell中,则它始终是左对齐的.如何对标题单元格进行居中对齐,例如"名称"？

<md-header-cell *cdkHeaderCellDef md-sort-header style="text-align:center"> 
      Name 
</md-header-cell>

plnkr