标签: angular-material

刚开始构建Angular应用。我正在写一个小的图书清单应用程序。我遇到的麻烦对话框组件从材料模块。我已经访问了Angular材料网站以检查我的实现，但仍然无法使其按预期运行。我有一个类似的问题与小吃吧成分。想知道以前是否有人遇到过此问题。谢谢你的帮助！

app.Module.ts

import {MatDialogModule } from '@angular/material/dialog';

imports:[MatDialogModule]

collection.component.ts

import {MatDialogModule, MatDialogRef } from '@angular/material/dialog';

bookDetailDialogRef: MatDialogRef<BookDetailComponent>;

constructor(private dataService: DataService, private snackBar: MatSnackBarModule,
              private _dialog: MatDialogModule, private _router: Router){}

openDialog(bookId: number): void{
    let config = {with: '650px', height: '400px', position: {top: '50px'}};
    let dialogRef = this._dialog.open(this.bookDetailDialogRef, config);
    dialogRef.componentInstance.bookId = bookId;
    dialogRef.afterClosed().subscribe(res => {this.getBooks();});
  }

collection.component.html

<button mat-button (click)="openDialog(book.id)"><i class="material-icons">
              pageview</i> Dialog</button>

我的多个下拉列表工作但它显示相同的值.我正在追随角度材料成分.

我为每个数组对象创建了不同的过滤器仍然显示相同的下拉列表.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { startWith } from 'rxjs/operators/startWith';
import { map } from 'rxjs/operators/map';
import { UsersComponent } from '../users/users.component';

@Component({
  selector: 'app-accommodation',
  templateUrl: './accommodation.component.html',
  styleUrls: ['./accommodation.component.css']
})
export class AccommodationComponent {

      myControl = new FormControl();

      country = [
        new UsersComponent('United States'),
        new UsersComponent('Canada'),
        new UsersComponent('Brazil'),
        new UsersComponent('India'),
        new UsersComponent('China'),
        new UsersComponent('Japan'),
      ];

      nationality = [
        new UsersComponent('American'),
        new UsersComponent('Canadian'), …

我要使图标和搜索字段在同一行。

<div class="example-header">
    <mat-form-field>
      <mat-icon>search</mat-icon>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
    </mat-form-field>
  </div>

上面我添加了我的HTML代码..

演示

我写了很多css，但是我无法获得帮助。

我试图在Angular Material组件文档中创建一个像这样的材质选项卡组。

我遇到的问题是选项卡的内容未加载/显示。我已经从文档中复制了准确​​的代码，但是仍然没有运气。

我使用的代码：

<mat-tab-group>

  <mat-tab label="One">
    <h1>Some tab content</h1>
    <p>...</p>
  </mat-tab>

  <mat-tab label="Two">
    <h1>Some more tab content</h1>
    <p>...</p>
  </mat-tab>

</mat-tab-group>

我已经在StackBlitz上重新创建了该问题

我需要制作响应表,甚至可以在移动视图中呈现而不会分解.为了使它工作,我使用下面的标准HTML表链接

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

看看样本:https://www.w3schools.com/howto/howto_css_table_responsive.asp

它工作得很好但最近切换到Angular 5表,它没有响应式设计的API.如何将overflow-x auto添加到角表？样本角5表:

https://stackblitz.com/edit/angular-material-table-data-source-ibmgv2 提前致谢

我想为自动完成素材创建过滤器.

我的模特:

 export class Country {
      country_id: number;
      name: string;
       }

打电话给webmethod ws

 this.ws.AllCountry().subscribe(
      countryes => {
        this.countryes = countryes.map((country) => {
          return new Country(country);
        });
      }
    );

创建此过滤器,但不起作用:

filterStates(val: string) {
    if (val) {
      let filterValue = val.toLowerCase();//toLowerCase does not exist on type Country.
      return this.countryes.filter(name => name.toLowerCase().startsWith(filterValue));
    }
    return this.countryes;
  }

你能告诉我任何解决方案吗？

谢谢

我在这里发帖是因为我找不到任何有用的东西.我正在尝试使用角度材料创建选择数据表,

表中应显示的数据来自laravel5.4应用程序.

HTML代码:

<!-- Checkbox Column -->
<ng-container matColumnDef="select">
  <mat-header-cell *matHeaderCellDef>
    <mat-checkbox (change)="$event ? masterToggle() : null"
                  [checked]="selection.hasValue() && isAllSelected()"
                  [indeterminate]="selection.hasValue() && !isAllSelected()">
    </mat-checkbox>
  </mat-header-cell>
  <mat-cell *matCellDef="let row">
    <mat-checkbox (click)="$event.stopPropagation()"
                  (change)="$event ? selection.toggle(row) : null"
                  [checked]="selection.isSelected(row)">
    </mat-checkbox>
  </mat-cell>
</ng-container>

.....

错误详情:

我想用嵌套单元格模拟子行创建一个表。如果每个单元格的内容不超过嵌套单元格（A）的min-height属性值，则该方法工作正常。

不幸的是，当超过此值时，表会崩溃（B）。有没有简单的方法可以正确对齐嵌套单元格以获得像（C）这样的表？

代码：https：//stackblitz.com/edit/angular-aejwfm

（*）我知道我们可以使用javascript将代表某个子行的所有单元格的高度设置为max（该子行中所有单元格的高度），但是我更喜欢纯HTML / CSS / Angular解决方案。

我需要查看Angular Material的默认图标列表 https://material.angular.io/components/icon/overview

我没有使用Font Awesome和Google Fonts

我创建了一个使用角度材料在角度2中进行选择和分页的表格.

我拿了一个名为Remove Selected Rows的按钮来删除表中选定的行.

但是,当删除所选行时,正在加载的所有表数据都与为分页指定的值不匹配.

下面是我的代码的stack-blitz链接..

https://stackblitz.com/edit/delete-rows-mat-table-vj4hbg?file=app%2Ftable-selection-example.html

下面显示的是输出.

最初,该表仅显示为分页值指定的行.

但是当我删除第3行时,即使分页值仅为3,也会加载所有行.

任何人都可以告诉我如何使用删除行后指定的分页值限制我的表行.