而不是将数据显示到表格的常规方式。我正在尝试创建我的自定义表组件并通过 .

像这样：

<table mat-table [dataSource]="dataSource">
	<!-- I want to Render the header and cell data here -->
	<ng-content></ng-content>
	
	<mat-header-row *matHeaderRowDef="headers; sticky: true"></mat-header-row>
	<mat-row *matRowDef="let row; columns: headers;"></mat-row>
</table>

所以我可以像这样调用这个自定义组件：

<app-customized-table>
	<ng-container matColumnDef="id">
		<mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
		<mat-cell *matCellDef="let element"> {{element.Id}} </mat-cell>
	</ng-container>
	...etc
</app-customized-table>

但是，它不会检测内容。这是我正在尝试做的一个 stackblitz 示例。

https://stackblitz.com/edit/angular-qwvcln?file=src%2Fapp%2Fcustom-table.component.ts

有没有办法做到这一点？

谢谢。

所以,我在mat-form-field中使用mat-select时遇到了问题.使用mat-form-field和mat-input不是问题,我相当确定我的导入也是正确的,但是在尝试使用mat-select时我收到以下错误:

错误:md-form-field必须包含MdFormFieldControl.您是否忘记将mdInput添加到本机...

我的HTML代码如下:

<mat-form-field class="full-width">
  <mat-select name="sampleType" formControlName="sampleTypeCtrl" 
   placeholder="Sample Type" required>
     <mat-option *ngFor="let sample of samples" [value]="sample.value">
       {{ sample.viewValue }}
     </mat-option>
  </mat-select>
</mat-form-field>

我的视图模块包含此组件并导入到我的主app.module.ts文件中,如下所示:

...
import { MatFormFieldModule, MatInputModule, MatSelectModule } from 
   '@angular/material';
...

@NgModule({
  imports: [
    ...
    MatInputModule,
    MatFormFieldModule,
    MatSelectModule,
    ...
  ],
})
export class ViewModule {}

我的主app.module.ts文件包含ViewModule和NoConflictStyleCompatibilityMode导入,如下所示:

...
import { ViewModule } from './view/view.module';
import { NoConflictStyleCompatibilityMode } from '@angular/material';
...
@NgModule({
  ...
  imports: [
    ViewModule,
    NoConflictStyleCompatibilityMode
  ],
  ...
})
export class AppModule { }

当我从mat-select周围移除mat-form-field时,错误消失了,但是我对mat-input(使用mat-form-field)和mat-select的样式不一致.我正在导入MatSelectModule和MatFormFieldModule,但我收到此错误.我还更新了我的npm角度材料2,以便它具有最新和最好的,但仍然没有.我在俯瞰什么？我已经看到在最近的stackoverflows中解决了这种类型的问题,但我已经尝试过的每个解决方案都没有运气.

mat-select不正常工作
mat-form-field必须包含MatFormFieldControl

我正在尝试使用自定义电话号码输入控件添加一个表单字段。我使用了https://material.angular.io/components/form-field/examples中的电话示例。

这是代码：

    <mat-form-field>
  <example-tel-input placeholder="Phone number" required></example-tel-input>
  <mat-icon matSuffix>phone</mat-icon>
  <mat-hint>Include area code</mat-hint>

import {FocusMonitor} from '@angular/cdk/a11y';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
import {Component, ElementRef, Input, OnDestroy} from '@angular/core';
import {FormBuilder, FormGroup} from '@angular/forms';
import {MatFormFieldControl} from '@angular/material';
import {Subject} from 'rxjs';

/** @title Form field with custom telephone number input control. */
@Component({
  selector: 'form-field-custom-control-example',
  templateUrl: 'form-field-custom-control-example.html',
  styleUrls: ['form-field-custom-control-example.css'],
})
export class FormFieldCustomControlExample {}

/** Data structure for holding telephone number. */
export class MyTel {
  constructor(public area: string, …

我想按照本指南实现 Angular Material 自定义表单字段： https: //material.angular.io/guide/creating-a-custom-form-field-control

但我一直遇到此错误：错误错误：mat-form-field 必须包含 MatFormFieldControl。

根据文档：

当您尚未将表单字段控件添加到表单字段时，会出现此错误。如果您的表单字段包含本机或元素，请确保已向其中添加 matInput 指令并导入 MatInputModule。其他可以充当表单字段控件的组件包括 、 和您创建的任何自定义表单字段控件。

但是向标签添加 matInput 指令不会改变任何内容。就像它是盲目的，因为标签嵌入在这个新组件中<example-tel-input>

垫子形式字段：

<mat-form-field>
  <example-tel-input placeholder="Phone number" required></example-tel-input>
  <mat-icon matSuffix>phone</mat-icon>
  <mat-hint>Include area code</mat-hint>
</mat-form-field>

具有输入的组件：

<div [formGroup]="parts" class="example-tel-input-container">
  <input class="example-tel-input-element" formControlName="area" size="3" aria-label="Area code" (input)="_handleInput()">
  <span class="example-tel-input-spacer">&ndash;</span>
  <input class="example-tel-input-element" formControlName="exchange" size="3" aria-label="Exchange code" (input)="_handleInput()">
  <span class="example-tel-input-spacer">&ndash;</span>
  <input class="example-tel-input-element" formControlName="subscriber" size="4" aria-label="Subscriber number" (input)="_handleInput()">
</div>

Stackblitz： https: //stackblitz.com/edit/angular-9fyeha

我缺少什么？

我收到错误消息ERROR mat-form-field must contain a MatFormFieldControl，这应该意味着我需要在最近的父模块中导入MatFormFieldModule。但是我已经做了，所以我不明白问题出在什么地方...

模板

<form [formGroup]="form" (ngSubmit)="handleSubmit()">
    <mat-form-field>
        <input matInput placeholder="Name" formControlName="name" />
    </mat-form-field>

    <mat-form-field>
        <textarea
            matInput
            placeholder="Active Description"
            formControlName="activeDescription"
        ></textarea>
    </mat-form-field>

    <mat-form-field>
        <textarea
            matInput
            placeholder="Inactive Description"
            formControlName="inactiveDescription"
        ></textarea>
    </mat-form-field>

    <mat-form-field>
        <mat-checkbox formControlName="active">Active</mat-checkbox>
    </mat-form-field>
</form>

模组

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, MatSelectModule } from '@angular/material';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } …