标签: angular-material2

我创建了一个组件，它基本上是材质自动完成的包装器。我希望能够将一个可选值TemplateRef作为组件的输入（optionTemplate）。如果定义了模板，它将覆盖用于自动完成<mat-option>元素的默认模板。我将 ang-container与 a 一起使用TemplateOutlet，但自动完成面板不会显示，除非我还在mat-option下放置了一个元素mat-autocomplete。

谁能告诉我为什么这不起作用？有什么办法让它按预期工作吗？

我创建了这个StackBlitz 来演示这个问题。

自动完成.component.html

<mat-form-field>
  <input #input matInput type="text" class="form-control" [matAutocomplete]="autocomplete" (input)="valueChanged($event)" [readonly]="readonly"
    (focus)="$event.target.select()" (blur)="onTouched()">
  <mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="displayFunction" (optionSelected)="onOptionSelected($event)">
    <ng-container *ngTemplateOutlet="optionTemplate ? optionTemplate : defaultOptionTemplate; context: { options: filteredOptions }"></ng-container>

    <!-- The autocomplete panel does not show if this line is commented out --->
    <mat-option></mat-option>

  </mat-autocomplete>
</mat-form-field>

<ng-template #defaultOptionTemplate let-options="options">
  <mat-option *ngFor="let option of options" [value]="option">
      {{ displayFunction(option) }}
  </mat-option> …

我实际上是在重复一个 mat 输入字段，然后我编写了 [(ngModel)]，其中数组中对象的属性名称作为 [(ngModel)] 的值

例如，这是我拥有的对象数组：

test = [{name: 'Harish'},{name: 'Pushpa'}]

所以在 html 中我重复了这个数组，如下所示：

 <mat-form-field class="example-full-width" *ngFor="let i of test"> 
<input  matInput placeholder="Favorite food" [(ngModel)]='i.name' name='trtrtrtrt'>


</mat-form-field>

但它显示所有输入字段的值作为数组中最后一个元素的名称

这是我遇到的问题的工作原理。

我正在尝试将滑动手势集成到 Angular 材料 2(Angular5) 中。它在桌面上使用鼠标工作。问题是，当我使用移动设备（Chrome）时，它只感知选项卡标签上的手势。

模板代码：

<mat-tab-group mat-scroll-y (swipeleft)="swipe($event.type)" (swiperight)="swipe($event.type)" class="home-tabs" mat-stretch-tabs [(selectedIndex)]="selectedIndex">
    <mat-tab label="Home">
      <ng-template mat-tab-label>
        <mat-icon>home</mat-icon>
      </ng-template>
      <app-my-cars></app-my-cars>
    </mat-tab>
    <mat-tab label="Registered Cars">
      <ng-template mat-tab-label>
        <mat-icon>directions_car</mat-icon>
      </ng-template>
      <app-registered-cars></app-registered-cars>
    </mat-tab>
    <mat-tab label="Unregistered Cars">
      <ng-template mat-tab-label>
        <mat-icon>directions_car</mat-icon>
      </ng-template>
      <app-unregistered-cars></app-unregistered-cars>
    </mat-tab>
  </mat-tab-group>

组件代码：

export class DashboardHomeComponent implements OnInit {
  constructor() { }

  ngOnInit() {
  }
  selectedIndex: number = 0;
  totalTabs: number = 3;
  SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight' };
  swipe(eType) {
    console.log(eType)
    if(eType === 'swipeleft' && this.selectedIndex < this.totalTabs){
      this.selectedIndex …

我想知道是否可以为复选框添加验证错误消息（mat-error），例如包括所需的验证。

<mat-checkbox [formControl]="formControl">
  <ng-content></ng-content>
</mat-checkbox>
<mat-error *ngIf="formControl.hasError('required')">

我正在尝试减少角材料步进器组件上的填充，因为我正在开发一个紧凑型：

要删除此处的填充：

在官方的角度材质文档中，他们指出您应该创建一个特定的选择器。我只是不知道该怎么做。我已经尝试过以下方法：

在chrome工具中，我找到了一个CSS类.mat-horizontal-stepper-header。我正在尝试将填充从 24 像素减少到 10 像素，如下所示：

.mat-horizontal-stepper-header {
  padding: 14px !important;
}

这是行不通的。我在这里创建了一个Stackblitz来说明问题。

我有一个mat-select具有固定数量mat-option元素的元素。要查看最后一个元素，我必须滚动列表。是否可以扩大该区域，以便我可以在不滚动的情况下看到最后一个元素？

<mat-form-field appearance="outline">
    <mat-select>
        <mat-option [value]="0">Automatically</mat-option>
        <mat-option [value]="10">10</mat-option>
        <mat-option [value]="20">20</mat-option>
        <mat-option [value]="50">50</mat-option>
        <mat-option [value]="100">100</mat-option>
        <mat-option [value]="-1">All</mat-option>
    </mat-select>
</mat-form-field>

[我拥有的]

[我想要的是]

提前致谢！

解决方案：

我最终是这样解决的：

@Component({
  selector: 'select-value-binding-example',
  templateUrl: 'select-value-binding-example.html',
  styleUrls: ['select-value-binding-example.css'],
  encapsulation: ViewEncapsulation.None
})

和

.mat-select-panel{
  max-height: <your new height>
}

在组件相关的 .scss 文件中

实际上，我使用了角形材料扩展面板（手风琴）来进行面板扩展。所以我尝试过的是我只想在一个父扩展面板中显示子面板，如下所示。见下图。

数据库将成为顶级父面板，其中我有不同的数据库作为子面板。为此，我编写了这样的代码。但代码不起作用意味着当我单击子面板内的任何父面板时，所有内容都会折叠。我的意思是说面板正在倒塌。参见下面的代码：

<mat-accordion>

        <mat-expansion-panel>
            <mat-expansion-panel-header>
              <mat-panel-title>
                Databases
              </mat-panel-title>
              </mat-expansion-panel-header>


              <mat-expansion-panel (opened)="panelOpenState = true"
                             (closed)="panelOpenState = false">
                  <mat-expansion-panel-header>
                    <mat-panel-title>
                      MySQL
                    </mat-panel-title>
                  </mat-expansion-panel-header>

                  <mat-form-field>
                    <textarea matInput placeholder="Assertions"></textarea>
                  </mat-form-field>

                  <mat-form-field>
                      <textarea matInput placeholder="Assertions"></textarea>
                    </mat-form-field>

                    <mat-form-field>
                        <textarea matInput placeholder="Assertions"></textarea>
                      </mat-form-field>

                      <mat-form-field>
                          <textarea matInput placeholder="Assertions"></textarea>
                        </mat-form-field>
                </mat-expansion-panel>


                <mat-expansion-panel (opened)="panelOpenState = true"
                             (closed)="panelOpenState = false">
                  <mat-expansion-panel-header>
                    <mat-panel-title>
                        Oracle
                    </mat-panel-title>
                  </mat-expansion-panel-header>

                  <mat-form-field>
                    <textarea matInput placeholder="Assertions"></textarea>
                  </mat-form-field>

                  <mat-form-field>
                      <textarea matInput placeholder="Assertions"></textarea>
                    </mat-form-field>

                    <mat-form-field>
                        <textarea matInput placeholder="Assertions"></textarea>
                      </mat-form-field>

                      <mat-form-field>
                          <textarea matInput placeholder="Assertions"></textarea>
                        </mat-form-field>
                </mat-expansion-panel>

                <mat-expansion-panel (opened)="panelOpenState = true"
                             (closed)="panelOpenState …

组件： https: //material.angular.io/components/snack-bar/examples

我有一个页面是父部分（'#wrapper_container'）。我想在“#wrapper_element”的子元素的中心弹出小吃栏。

谢谢

我想使用 Material 的 GridList 组件来制作两列布局。我在里面放置了 ExpandPanel，但它们位于图块的中心。我需要它们来适应水平空间。当然，我可以为组件放置一个类属性并设置宽度，但我不确定这是否是执行此操作的最佳“材料”方式。这是我的测试示例：

<mat-grid-list cols="2" ratio="2:1">
  <mat-grid-tile>
    <mat-expansion-panel [expanded]='true' >
      <mat-expansion-panel-header>
        <mat-panel-title>
          TITLE
        </mat-panel-title>
       </mat-expansion-panel-header>
       <mat-form-field>
         <input matInput placeholder="TEST">
       </mat-form-field>
    </mat-expansion-panel>
  </mat-grid-tile>
  <mat-grid-tile>
    <mat-expansion-panel [expanded]='true'>
      <mat-expansion-panel-header>
        <mat-panel-title>
          TITLE2
        </mat-panel-title>
      </mat-expansion-panel-header>
      <mat-form-field>
        <input matInput placeholder="TEST">
      </mat-form-field>
    </mat-expansion-panel>
  </mat-grid-tile>
</mat-grid-list>

我对角度和材料很陌生。我很乐意接受一些建议。

我正在使用材料表原理图，但不知道如何

我认为重要的部分是文件connect()中的方法datasource.ts。this.data只是一个数组。

  /**
   * Connect this data source to the table. The table will only update when
   * the returned stream emits new items.
   * @returns A stream of the items to be rendered.
   */
  connect(): Observable<any[]> {
    // Combine everything that affects the rendered data into one update
    // stream for the data-table to consume.
    const dataMutations = [
      observableOf(this.data),
      this.paginator.page,
      this.sort.sortChange
    ];

    // Set the paginators length
    this.paginator.length = this.data.length; …