我将 angular 7 与材料一起使用，我想创建一个带有信息图标的输入字段，最终使用 matSuffix 这是一个工具提示。它适用于台式机，但不适用于手机。

我创建了一个堆栈闪电战：https ://angular-ncv2mp.stackblitz.io/ 我也尝试使用按钮，但它也不起作用。

有谁能够帮助我？

我正在使用 Angular 7 和 Angular Material 从 api 获取用户名。为此，我使用了角材料芯片。这是链接，我正在关注：

https://stackblitz.com/angular/jemmxnqdyro?file=app%2Fchips-autocomplete-example.ts

但问题是目前我正在从数组中获取数据。我真正需要的是从这个 api 中获取用户名：https : //jsonplaceholder.typicode.com/users。我感到困惑的是如何使用角材料芯片以及如何获取数据。

你能帮我实现同样的功能吗，因为我是 angular 的新手。

如果有人可以在这方面展示演示，那将非常有帮助。

提前致谢。

当我需要为产品打印标签时，我正在一个项目中工作，但是当我使用带有 mat-form-group 的步骤控制来控制步骤和 mat-radio-group 时，我收到错误：mat-表单域必须包含一个 MatFormFieldControl。

我已经尝试将 matInput 设置到 mat-radio-group 中，就像我使用 mat-select 一样，但不起作用

这项工作：

 <mat-step [stepControl]="firstFormGroup">
                <form [formGroup]="firstFormGroup">
                <ng-template matStepLabel>Informe o tipo de produto</ng-template>
                <mat-form-field>
                    <mat-label>Tipo de produto</mat-label>
                    <mat-select matInput formControlName="firstCtrl" required>
                        <mat-option value="cobrenu">Cobre Nú</mat-option>
                        <mat-option value="cordpar">Cordão Paralelo Torcido</mat-option>
                        <mat-option value="prodpad">Produto Padrão</mat-option>
                    </mat-select>
                </mat-form-field>
                <div>
                    <button mat-button matStepperNext>Próximo</button>
                </div>
                </form>

但这不是：

<mat-step [stepControl]="secondFormGroup">
                <form [formGroup]="secondFormGroup">
                <ng-template matStepLabel>Informe o produto</ng-template>
                <mat-form-field>
                    <mat-label>Produto</mat-label>
                    <mat-radio-group aria-label="metros" >
                            <mat-radio-button value="1">100</mat-radio-button>
                            <mat-radio-button value="2">200</mat-radio-button>
                            <mat-radio-button value="3">300</mat-radio-button>
                            <mat-radio-button value="4">400</mat-radio-button>
                            <mat-radio-button value="5">500</mat-radio-button>
                            <mat-radio-button value="6">600</mat-radio-button>
                    </mat-radio-group>
                </mat-form-field>
                <mat-radio-group aria-label="metros" …

我有一个现有项目，我想在同一个项目中安装角材料。问题是该项目在 Angular (6.1.5) 中，而我的 cli 的全球版本是 (8.1.0)。虽然我尝试过，但它不再起作用。请帮忙。

我将 Angular Material 的表格与 Bootstrap 的声明性 css 一起使用。尽管将表格的宽度和最大宽度设置为 100%，但一列无法正确截断文本。当未设置容器的宽度时，通常会出现此问题。我应该在 Material 表上应用哪些类来截断长文本。

<div class="col flex-grow-1 min-height-0 m-0 p-0">
  <div class="h-100 overflow-auto">
    <table *ngIf="trunks | async as data" mat-table
           [dataSource]="data.entities"
           class="w-100">
      <ng-container matColumnDef="select">
        ... Checkbox logic
      </ng-container>
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>
             ... Header logic, this is much shorter than the offending name
          </ng-container>
        </th>
        <td mat-cell *matCellDef="let trunk" class="text-truncate">
          <div class="d-inline text-truncate">
            ... Status icon logic, width of < 40px
            <a [routerLink]="['./' + trunk.id]" [queryParams]="{}" queryParamsHandling="merge"
               class="text-truncate">{{ trunk.name }}</a>
          </div>
        </td> …

我正在尝试增加材质复选框的大小。

transform似乎增加了材质复选框的大小。但是，我不确定这是否是实现这一目标的正确方法？

CSS

 ::ng-deep .mat-checkbox .mat-checkbox-frame {
     transform: scale(2);
 }

 ::ng-deep .mat-checkbox-checked .mat-checkbox-background {
     transform: scale(2);
 }

我在 angular 7/8 中使用了 Angular flexlayout 库。我希望左侧有 4 个按钮（flex-start），并且希望右侧（flex-end）的两个复选框处于同一级别。如果可能的话，我想在 flexlayout Angular 库中进行。

我已经尝试了我在下面向您展示的代码。我还尝试制作 2 个 mat-card-action 组件，但它们彼此低于，而不是在一条线上。

<mat-card-actions fxLayoutGap="1em">

  <button mat-raised-button color="accent" (click)="newRows()">Add</button>
  <button [disabled]="selectedRow != undefined && selectedRow.isBevoorschotting" mat-raised-button color="accent"
    (click)="updateRows()">Update</button>
  <button mat-raised-button color="warn" (click)="deleteRows()" [disabled]='!isAdmin'>Delete</button>
  <button mat-raised-button color="accent" (click)="refresh(0)">Refresh</button>

  <mat-checkbox (change)="onclickMutatieVelden()" [(ngModel)]="toonMutatievelden">
    <p>Mutatie velden aan...</p>
  </mat-checkbox>
  <mat-checkbox (change)="onclickMaakInactief()" *ngIf="selectedRow" [(ngModel)]="!selectedRow.isActief">
    <p>Maak Inactief...</p>
  </mat-checkbox>
</mat-card-actions>

Anybody can help me out ?

在这个 stackblitz 中，我收到以下错误（即使MatBottomSheetModule是导入的）：

        ERROR
        Error: StaticInjectorError(AppModule)[CountryCodeSelectComponent -> MatBottomSheetRef]:
        StaticInjectorError(Platform: core)[CountryCodeSelectComponent -> MatBottomSheetRef]:
        NullInjectorError: No provider for MatBottomSheetRef!

想法？

Angular / 组件功能请求

请为此投票。我要求使用例对称 WRT 我们如何使用其他类似的 Angular 组件/服务。

https://github.com/angular/components/issues/17011

我使用 MatMenu 作为弹出窗口来浏览我的网络应用程序上的新用户，所以我不想在用户点击它时关闭它。

我已经使用了 $event.stopPropagation() 来阻止它在我单击其中的按钮时关闭。现在我想知道如何保持打开状态，即使您单击它的外部。

有一个 Material 属性matTreeNodePadding可以为 DOM 元素设置 padding-left：

<div matTreeNodePadding></div>

渲染此块后：

   <div style="padding-left: 40px;"></div>

如何将此填充减少到 20px？