标签: angular-material2

我使用 Angular4 与 Redux 和 Angular Material 来设计我的网页。我正在尝试将 md-select 面板设置为打开。示例场景：单击按钮调度一个操作来打开选择面板以显示所有选项。

我正在使用 redux 操作来操纵我的组件状态。所以基本上我需要触发一个操作来将选择设置为打开。

有什么建议么？

我正在将应用程序从 AngularJS 升级到 Angular 5。我想出了大部分事情，但仍然处于学习过程中，我无法找出将自动完成列表连接到后端的最佳方法。Material Design 网站也没有提到这一点。

下面是代码现在的样子：

  <mat-form-field>

    // chips are up here

    <mat-autocomplete (optionSelected)="chipAdd($event,field)" #auto="matAutocomplete">
      <mat-option [value]="opt.id" *ngFor="let opt of field.options">
        {{ opt.name }}
      </mat-option>
    </mat-autocomplete>

  </mat-form-field>

我已经删除了 mat-chip-list 并且只包含了相关的代码。

所以我的问题是......现在我从 field.options 获取选项——而不是这个，一旦我开始输入，我如何从 http 后端动态加载它们？

谢谢你的帮助！:)

角 4.4.4

角材料 2.0.0-beta.12

我创建了一个包含以下mat-select元素的模板驱动表单：

<mat-form-field class="add-task-full-width">
    <mat-select matInput
                [(ngModel)]="taskForCreation.areaId"
                id="areaControl"
                #areaControl="ngModel"
                name="areaControl"
                required
                (ngModelChange)="onAreaChanged($event)"
                placeholder="Area">
        <mat-option *ngFor="let area of areas" [value]="area.id">
            {{ area.description }}
        </mat-option>
        <mat-error *ngIf="areaControl.hasError('required')">
            Area is <strong>required</strong>
        </mat-error>
    </mat-select>
</mat-form-field>

如果我在没有从列表中选择项目的情况下跳出该字段，控件会变为红色并变为无效，但错误消息显示在列表底部，而不是控件下方。无论我尝试什么，我都无法改变这一点。

谁能看到我哪里出错了？

我有这个 HTML：

 <mat-radio-group>
  <mat-radio-button  [(ngModel)]="searchType">
      And (Narrower search)
  </mat-radio-button>
  <mat-radio-button  [(ngModel)]="searchType">
       Or (Wider search)
  </mat-radio-button>
 </mat-radio-group>

我收到此错误：

错误：没有未指定名称属性的表单控件的值访问器

我尝试改用这个：

 <mat-radio-button name="search-and"[(ngModel)]="searchType">
      And (Narrower search)
 </mat-radio-button>

我收到这个错误：

错误：没有名称的表单控件的值访问器：'search-and'

所以我尝试了这个：

 <mat-radio-button value="search-and" name="search-and" [(ngModel)]="searchType">
              And (Narrower search)
 </mat-radio-button>

和这个：

  <mat-radio-button [value]="search-and" name="search-and" [(ngModel)]="searchType">
              And (Narrower search)
  </mat-radio-button>

我仍然收到此错误：

错误：没有名称的表单控件的值访问器：'search-and'

如何材料的角度改变过去旧版本在这里我们使用md代替mat？

我现在有 "@angular/material": '^2.0.0-beta.8'

运行命令 ng serve 工作正常，因为 ng serve --prod 显示错误

ERROR in src\app\employee\employee.component.html(12,9): : Property 'emp' does not exist on type 'employee[]'.
src\app\employee\employee.component.html(23,9): : Property 'emp' does not exist on type 'employee[]'.
src\app\employee\employee.component.html(36,9): : Property 'emp' does not exist on type 'employee[]'.

员工.component.html

    <h2 mat-dialog-title>Edit details</h2>
<div mat-dialog-content>
  <form
    fxLayout="column"
    [formGroup]="editForm"
    #f="ngForm">
  <div class="input-row">
      <mat-form-field fxFlex>
        <mat-label>Id</mat-label>
        <input readonly 
        value="{{data.emp.id}}"
          matInput #id disabled
          formControlName="id"
          required/>
      </mat-form-field>
    </div>
    <div class="input-row">
      <mat-form-field fxFlex>
        <mat-label>Name</mat-label>
        <input 
        value="{{data.emp.name}}"
          matInput #name
          placeholder="Email"
          formControlName="name"
          required/>
      </mat-form-field>
    </div>

    <div …

我正在尝试使用 DataSource 接口来更新 MatTableData，使用服务器端分页。

<div>

  <mat-table [dataSource]="dataSource" matSort matSortDisableClear>

    <ng-container matColumnDef="type">
      <mat-header-cell *matHeaderCellDef mat-sort-header class="w-200 th-center"> Type</mat-header-cell>
      <mat-cell *matCellDef="let v" class="w-200 th-center"> {{v.type}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="title">
      <mat-header-cell *matHeaderCellDef mat-sort-header class="w-200 th-center"> Title</mat-header-cell>
      <mat-cell *matCellDef="let v" class="w-200 th-center"> {{v.title}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef mat-sort-header class="w-200 th-center"> Status</mat-header-cell>
      <mat-cell *matCellDef="let v" class="w-200 th-center"> {{v.status}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="url">
      <mat-header-cell *matHeaderCellDef mat-sort-header class="w-200 th-center"> Url</mat-header-cell>
      <mat-cell *matCellDef="let v" class="w-200 th-center"> {{v.url}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="host">
      <mat-header-cell *matHeaderCellDef mat-sort-header class="w-250 th-center"> …

如何在角形材质中允许重复的标题值。

我有多个标头，此处标头值相同。它给出了错误：

提供了重复的列定义名称