标签: angular-material2

在 Angular 中，是否可以有一个线性步进器，其中各个步骤是单独的组件？例如：

<mat-horizontal-stepper [linear]="isLinear">
    <mat-step [stepControl]="firstFormGroup" label="Some Form">
        <first-component></first-component>
    </mat-step>
    <mat-step [stepControl]="secondFormGroup" label="Another Form">
        <second-component></second-component>
    </mat-step>
    <mat-step [stepControl]="thirdFormGroup" label="Review">
        <third-component></third-component>
    </mat-step>
</mat-horizontal-stepper>

当我尝试这个时，我在点击matStepperNext按钮时收到以下错误：

TypeError: Cannot read property 'invalid' of undefined.

我正在将一个电子应用程序从 AngularJS 迁移到 Angular5，并且我在需要加载任意模块及其组件并将主要组件动态渲染到视图的部分中遇到问题（它是一个插件系统）。在我的应用程序中，插件是一个 angular5 模块，其中包含在我的 angular5 应用程序中呈现的组件。

我像这样动态加载组件：

@ViewChild("view", { read: ViewContainerRef })
view: ViewContainerRef;

constructor(
  // ...
  private compiler: Compiler,
  private injector: Injector,
  private moduleRef: NgModuleRef<any>
) {}

然后，

const addonModule = addonObject.getModule();
this.compiler
  .compileModuleAndAllComponentsAsync(addonModule)
  .then(factories => {
    const factory = factories.componentFactories.find(
      componentFactory =>
        addonObject.getViewComponent().name ==
        componentFactory.componentType.name
    );
    if (factory) {
      const cmpRef = factory.create(this.injector, [], null, this.moduleRef);
      cmpRef.instance.config = {
        from: "afd@test.com",
        apikey: "dsfkjd"
      };
      this.view.insert(cmpRef.hostView);
    }
  });

它工作得很好，但是当我在模板中添加 Material Component 时，它失败并factory.create()出现以下错误：

模板：

<div>
    <button …

我从确切的示例“具有排序、分页和过滤功能的数据表”开始。这里https://material.angular.io/components/table/examples 它工作正常。但是现在我想在没有表格的情况下使用分页器，所以我在 html 文件“< mat-table ... < /mat-table>”中简单地替换为：

<div *ngFor="let row of dataSource.connect() | async" >
{{ row.id }} {{ row.name }} {{ row.progress }} {{ row.color }} <br>
</div>

但它不能正常工作，因为看起来：

• connect() 在启动时运行多次
• 只需悬停分页器箭头即可使其再次运行多次
• 在过滤器中输入一个字母做同样的事情

我想这不是正确的方法。

最后，我想重用相同的方法来显示卡片，带有过滤器和分页器。

TIA 寻求任何帮助。

J.P

我把代码放在这里：https : //angular-6q44a4.stackblitz.io 我添加了一些console.log来显示发生了什么（不是在stackblitz上）但这里是一个例子：

只需悬停箭头然后单击，就可以看到许多渲染数据。

而相同的代码但有一个表，它按预期工作：

我用 mini-fab 按钮从零一个分页器重新创建，灵感来自http://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google 的一些代码，添加几个过滤器，它工作正常:)

有没有一种方法可以更改打开的 Angular Material 2 对话框的宽度（或高度）？

我得到的最接近的是获取对对话框的引用并从对话框中调用该updateSize方法。虽然我不认为对话框引用方法以这种方式工作。

我使用对话框来捕获和提交表单数据。根据响应、成功或错误，对话框中的内容会更新。正是在这一点上，我想减少对话框的宽度。

我已经安装Angular v4.2.4并Angular Material 2 v2.0.0-beta.12

如果需要，很乐意提供其他信息或代码示例。或者考虑采用不同的方法。

我正在使用角度材料从数组形式的数据创建表格。这一切都很好。我遇到的问题是字段本身需要是表单字段。它们需要从数据中填充，但可编辑。此外，带有空白字段的新行应该是可填充和持久化的。我发现虽然行数据填充，但值永远不会进入表单字段本身，或者表单字段都只由第一条记录填充。我引用字段值的方式有问题，但我看不到它是什么。所以，这是 html 中的表格：

<form #a="ngForm" >
  <mat-table #approvalsTable [dataSource]="approvalsDataSource"
             #approvalsSort="matSort" matSort matSortActive="description"
             matSortDirection="asc" style="width:900px;font-family: Arial, Helvetica, sans-serif; font-size:14px;">

    <ng-container matColumnDef="description">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Description</mat-header-cell>
      <mat-cell *matCellDef="let element; let i = index">
        <input type="text"
               name="description" [(ngModel)]="element.description" [value]="element.description">
        {{element.description}}

      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="approvalNumber">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Approval No.</mat-header-cell>
      <mat-cell *matCellDef="let element; let i = index">
        <input type="text"
               name="approvalNumber" [(ngModel)]="element.approvalNumber" [value]="element.approvalNumber">
        {{element.approvalNumber}}

      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="expires">
      <mat-header-cell *matHeaderCellDef mat-sort-header>Expiration Date</mat-header-cell>
      <mat-cell *matCellDef="let element; let i = index">
        <input type="text"
               name="expires" [(ngModel)]="element.expires" [value]="element.expires">
        {{element.expires}}

      </mat-cell>
    </ng-container> …

我正在实现一个像 twitter 这样包含图像和文本的提要屏幕。我正在使用 angular 4。目前我正在使用Virtual Scroll来提高用户滚动深度（如 100 个项目）时的性能。我的问题是在我的列表中所有项目的大小都是可变的，并且这个库不完全支持动态高度。就像需要一些最小的固定高度。这会导致在移动设备和某些浏览器中闪烁。如果可能的话，我想用 Angular 实现 React Js Virtual scroll。任何人都可以向我建议任何解决方案，以便我的提要列表变得顺畅。

如果我的 FormGroup 的字段是模型绑定的，ala [(ngModel)]，并且在页面加载时填充，例如由于服务，我的提交按钮，它被保护为[disabled]="biodataForm.status !== 'VALID'"，不会被禁用。如果表格出现空白并且我正常填写，那么当表格正确填写时，警卫会通过。如果通过数据绑定填充了相同的确切值，则 biodataForm.status 值将保持无效，直到我更改每个字段的值。

我的感觉是，在填充数据绑定后，表单应该识别出它具有有效内容，因此它的状态应该从 INVALID 更改为 VALID ......这里出了什么问题？

我的表单标记如下所示：

  <form class="form" name="biodataForm" [formGroup]="biodataForm">
    <mat-form-field class="full-width">
      <input matInput placeholder="First Name" 
        required
        [(ngModel)]="_memberdata.firstname"
        [formControl]="firstnameFormControl">
      <mat-error *ngIf="firstnameFormControl.invalid">{{getRequiredErrorMessage('firstname')}}</mat-error>        
    </mat-form-field>
    <mat-form-field class="full-width">
      <input matInput placeholder="Last Name" 
        required
        [(ngModel)]="_memberdata.lastname"
        [formControl]="lastnameFormControl">
      <mat-error *ngIf="lastnameFormControl.invalid">{{getRequiredErrorMessage('lastname')}}</mat-error>                
    </mat-form-field>
    <mat-form-field class="full-width"
      hintLabel="Note: We'll send you an email with a link to click to prove it's you">
      <input matInput placeholder="Email" 
        required
        [(value)]="_memberdata.email"
        [formControl]="emailFormControl">
      <mat-error *ngIf="emailFormControl.invalid">{{getEmailErrorMessage()}}</mat-error>        
    </mat-form-field>    
    <mat-form-field class="full-width">
      <input matInput placeholder="Phone" type="tel" 
        [(value)]="_memberdata.phone"
        required …

我希望 Angular 材料选项卡的 mat-ink-bar 占据选项卡标题文本宽度的宽度。目前它大于选项卡标题文本宽度。

下图显示了它现在的样子。

下图显示了我想要的样子。

你能帮我看看如何做到这一点吗？

您如何使底部工作表组件像卡片一样出现在视图中，而不仅仅是出现在屏幕底部？使用版本 6.0.1。

从文档（https://material.angular.io/components/bottom-sheet/api）中，在选项中指定 viewContainerRef 应该会产生一些效果，但在示例中没有任何反应。

演示链接：https : //stackblitz.com/edit/angular-kfpaa2?file= app/ bottom-sheet-overview-example.ts

我有一个包含对象name和id属性的列表：

[
  {
    "name": "open",
    "id": "1"
  },
  {
    "name": "inprogress",
    "id": "2"
  },
  {
    "name": "close",
    "id": "3"
  }
]

并使用带有 *ngFor 的 MatSelect 迭代数组并使用 select using 绑定当前状态[(ngModel)]。

预期输出：

如果当前状态是inprogress禁用open选项

StackBlitz 示例