标签: angular-material

我正在使用Angular Material,并且这个表单有一个自动完成字段,我正在md-autocomplete使用它

<input type = "text" />

在内部渲染文本字段.我遇到了这个问题.每当文本长于字段的宽度时,我希望它包装,以便它不被截断,并显示在下一行中.

但是<input>没有办法设置样式,以便在下一行显示溢出文本(我知道textarea符合我的要求,但md-autocomplete使用input).

所以问题是如何在没有截断的情况下显示文本.任何建议都可以.请帮忙!

我正在尝试使用角度材料2在我的网站上显示图标,但我有点困惑.

这是它应该如何工作,从材料2的github repo中的演示:

https://github.com/angular/material2/blob/master/src/demo-app/icon/icon-demo.ts

我一直在尝试使用它,但根本没有显示任何图标.

我就是这样设置的:

app.component.ts

import {MdIcon, MdIconRegistry} from '@angular2-material/icon/icon';

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
  viewProviders: [MdIconRegistry],
  directives: [MdIcon],
})
export class MyComponent{
  constructor(private router: Router,
              private JwtService:JwtService,
              mdIconRegistry: MdIconRegistry){
    mdIconRegistry.addSvgIconSetInNamespace('core', 'fonts/core-icon-set.svg')
  }
}

和模板..

<md-icon>home</md-icon>

页面加载时没有错误,但没有显示图标.什么可能出错？

是否可以在步进器内重置(或只是跳到第一步)？文档中没有记录,但是可以这样做吗？在文档中声明步进器是建立在"CDK Stepper"(链接？)上的,但我找不到任何能够引导我实现目标的例子.

我有一个角元素

<mat-checkbox class="btn-block" 
              labelPosition="before" 
              (change)="showOptions($event)" 
              (click)="makeJSON($event.checked,i,j,k)">
</mat-checkbox>

这里onchange(实际上给出了checkout的状态)正在做一些其他的任务,我想要点击事件的复选框状态(选中或取消选中).

我已经尝试查看由click创建的对象,并且里面没有click对象,所以我如何检测是否选中了复选框.

我正在尝试在更新表中使用的数据后刷新我的Angular Table.

文档说"你可以通过调用renderRows()方法触发对表的渲染行的更新." 但它不像普通的子组件,我可以使用"@ViewChild(MatSort)排序:MatSort;" 因为我不导入它.

如果我导入它并尝试类似@ViewChild('myTable')myTable:MatTableModule; 然后我收到一个错误,指出renderRows()在该类型上不存在.

我怎么称呼这种方法？谢谢!

我的表格代码片段:

<mat-table #table [dataSource]="dataSource" myTable class="dataTable">

我在从 angular 8 更新到 9 并运行时遇到了以下错误

ng update @angular/material：

包“@angular/flex-layout”与“@angular/cdk”有不兼容的对等依赖（需要“^8.0.0-rc.0”，会安装“9.0.0”）。

当我自定义主题来设置字体时...

1. 一些文本的样式正确（例如<mat-card-title> <mat-card-action>等）
2. 但其他一些则没有（例如<p> <span> <mat-card-content>）并且默认为 Roboto...那些不应该采用 body-1 风格吗？请注意，我使用 mat-card 作为示例，但其他组件也会发生同样的情况。 https://material.angular.io/guide/typography

重现的最少步骤：

• 将 Google 字体添加到 index.html
• 在 styles.scss 中配置样式，以便新字体成为所有级别的默认字体（应该在任何地方使用）

$theme-primary: mat.define-palette(mat.$indigo-palette);
$theme-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-typography: mat.define-typography-config(
  $font-family: "'Nerko One', cursive",
);

$theme: mat.define-light-theme(
  (
    color: (
      primary: $theme-primary,
      accent: $theme-accent,
    ),
    typography: $my-typography,
  )
);
@include mat.all-component-themes($theme);

这是一个示例，您可以看到标题等已设置样式，但看不到卡片的内容： https://stackblitz.com/edit/angular-wan6f9 ?file=src/app/card-actions-example.html

我尝试了几种方法，包括配置每个级别，但都不起作用。唯一有效的方法是将默认值硬编码到文档的根目录，但我不想这样做。

我最近将项目升级到 Angular 15.1 并注意到一个新问题。

在页面上，我有一个 mat-tab-nav，它通过路由打开子页面：

<nav mat-tab-nav-bar color="primary">
  <a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.link" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">{{link.label}}< /a>
</nav>
<router-outlet></router-outlet>

更新后一切正常，但在控制台中我看到错误“必须通过 [tabPanel] 指定 mat-tab-nav-panel。 ”

查看 Angular 代码（第 385 行）https://github.com/angular/components/blob/main/src/material/tabs/tab-nav-bar/tab-nav-bar.ts 我看到代码：

override ngAfterViewInit() {
 if (!this.tabPanel && (typeof ngDevMode === 'undefined' || ngDevMode)) {
   throw new Error('A mat-tab-nav-panel must be specified via [tabPanel].');
 }
 super.ngAfterViewInit();
}

从文档（https://material.angular.io/components/tabs/api tabPanel）来看，tabPanel可能为空：

tabPanel：由导航栏控制的关联选项卡面板。如果未提供，则导航栏将遵循 ARIA 链接/导航地标模式。如果提供，它遵循 ARIA 选项卡设计模式。

我通过在代码中添加一个无用的 mat-tab-nav-panel 来修复它：

<nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel">
  <a mat-tab-link *ngFor="let link of …

我试图让我的材质对话框在右上角有一个 X 按钮，但我遇到了定位问题。

组件.ts

this.d.open(loginComponent, {
  width: '300px',
  height: '',
  panelClass: 'dialogC',
});

组件.html

<mat-dialog-content>
    <button mat-button class="close-icon" [mat-dialog-close]="true">
        <mat-icon>close</mat-icon>
    </button>
    <h2 mat-dialog-title>Login</h2>

样式文件

.dialogC {
  position: relative !important;
}

.close-icon {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
}

X 仅与左侧对齐，而不是与右上角对齐。建议？

更新，这是我添加 flex 后遇到的问题：

我试图编译我的项目，但出现错误：

Error: Error on worker #3: Error: No typings declaration can be found for the referenced NgModule class in static withConfig(configOptions, 
        // tslint:disable-next-line:max-line-length
        breakpoints = []) {
            return {
                ngModule: FlexLayoutModule,
                providers: configOptions.serverLoaded ?
                    [
                        { provide: LAYOUT_CONFIG, useValue: Object.assign(Object.assign({}, DEFAULT_CONFIG), configOptions) },
                        { provide: BREAKPOINT, useValue: breakpoints, multi: true },
                        { provide: SERVER_TOKEN, useValue: true },
                    ] : [
                    { provide: LAYOUT_CONFIG, useValue: Object.assign(Object.assign({}, DEFAULT_CONFIG), configOptions) },
                    { provide: BREAKPOINT, useValue: breakpoints, multi: true },
                ]
            };
        }.

我使用了 …