标签: angular-material

我正在使用 md-autocomplete 元素，但是当搜索字段为空时没有下拉列表。它甚至不调用 querySearch 函数。当我输入任何内容时，该功能被触发并且自动完成工作。我究竟做错了什么？

HTML：

        <md-autocomplete
            md-selected-item="selectedItem"
            md-no-cache="true"
            md-search-text="searchText"
            md-items="item in querySearch(searchText)"
            md-item-text="item.name"
            placeholder="Select a Product">
              <span md-highlight-text="searchText">
                 {{ '{{item.originalName}}  ({{item.id}})' }}
              </span>
        </md-autocomplete>

JavaScript：

        function querySearch(query) {
            var results = query ? $scope.products.filter(createFilterFor(query)) : $scope.products;
            return results;
        }


        function createFilterFor(query) {
            var lowercaseQuery = angular.lowercase(query);

            return function filterFn(item) {
                return (angular.lowercase(item.originalName).indexOf(lowercaseQuery) === 0);
            };

        }

我用angular 2材质制作了这个简单的侧面导航。我只想为台式机保留 oppened="true" 并保留手机和笔记本电脑的默认行为。这曾经存在于 Angular JS 材料中。我如何在 Angular 2 中实现这个？

<md-sidenav-container fullscreen>
  <md-sidenav #sideNav>
    <md-nav-list>
      <a>One</a>
      <a>Two</a>
    </md-nav-list>
  </md-sidenav>
  <md-toolbar color="primary">
    <button md-icon-button (click)="sideNav.toggle()">
      <md-icon>menu</md-icon>

</button>
<span>Title</span>
  </md-toolbar>

  <h1>
    {{title}}
  </h1>
</md-sidenav-container>

我正在尝试更改md-menu. 问题是 Angular Material 动态生成元素，我无法从我的 HTML 访问它们。

这是我的 DOM：

这是我的组件 HTML（md-menu生成那个 DOM）：

<md-toolbar color="primary">
  <h1>Logo</h1>
  <span class="spacer"></span>
  <img src="../../../images/avatar-default.png" class="avatar" [mdMenuTriggerFor]="userMenu" />

  <md-menu #userMenu="mdMenu">
    <button md-menu-item>{{username}}</button>
    <button md-menu-item>Log Out</button>
  </md-menu>
</md-toolbar>

我知道我可以使用 来div从全局样式中访问（在图片上选择的）.mat-menu-content {...}，但它会影响具有此类类的其他元素。而且我无法从组件 CSS 为这个 div 设置样式，因为该元素在组件范围之外。所以我试图找到从组件 CSS 更改此元素样式的方法，而不影响具有此类样式的其他元素。

如果有办法实现它，请告诉我。

我试图在我的 Angular 2 应用程序中覆盖一些 Material2 样式，但到目前为止我无法让它工作。具体来说，我想覆盖 md 菜单的背景颜色。这是我的 html 的样子：

<md-menu #menu="mdMenu" [overlapTrigger]="false" class="sub-drop-bg">
  <button md-menu-item routerLink="option-A" class="sub-drop-item">Option A</button>
...
</md-menu>

这就是我尝试在 LESS/CSS 中添加的内容：

md-menu.sub-drop-bg /deep/ {
  background-color: #555 !important;
}

到目前为止，这似乎没有效果。默认#fff背景颜色仍然显示为 md 菜单背景。

作为附加信息，当我将鼠标悬停在元素上并检查元素时，我看到默认mat-menu-content类的样式为白色背景，如下所示：

.mat-menu-content {
    background: #fff;
}

我已经尝试将该类添加到我的组件 CSS 中，并使用它来覆盖背景颜色，但也无济于事。如果我在浏览器控制台中为该类“取消选择”该颜色，背景颜色就会消失（变为透明）。但是，正如我所说，在我重新加载时，添加该类并覆盖 CSS 中的颜色不会覆盖白色。

如何仅使用 CSS 来完成此操作？

我正在尝试将 Angular 材料 5 日期选择器绑定到表单字段，我正在关注官方教程here，但没有关于如何将日历值绑定到表单中的字段的任何信息，它也可以绑定到一个类属性，但这也不起作用。我的模板很简单：

 <form #theForm="ngForm">
   .......Some fields.......
   <mat-form-field>
                  <input matInput [matDatepicker]="fixDate" placeholder="Choose a date" name="fixDate">
                  <mat-datepicker-toggle matSuffix [for]="fixDate"></mat-datepicker-toggle>
                  <mat-datepicker #fixDate></mat-datepicker>
              </mat-form-field>
 </form>

所以<mat-form-field>标签中的这块模板由表单中的输入组成，通过给它一个name，我希望它可以从 'catchable' .ts，但它不起作用，我在.ts文件中做的是：
(click)="saveReport(theForm)"

`public saveReport(form: NgForm){
    if(confirm("Sure you wanna save?")){
      //Some non relevant validation
      let valuesFromForm = form.value;
      console.log(valuesFromForm['fixDate']);
    }
}`

这会打印undefined，但表单中的其他字段工作正常，当您给它们一个时，name它们可以通过.ts文件中的表单对象检索 有什么建议吗？

所以我刚刚在 angular CLI 中打开了一个新项目，我想安装 Material ：

npm install --save @angular/material @angular/cdk

但它给了我以下错误：

C:\Users\TijlD\Desktop\projects\untitled46>npm install --save @angular/material @angular/cdk 
npm WARN @angular/animations@5.2.8 requires a peer of @angular/core@5.2.8 but none was installed. 
npm WARN @angular/cdk@5.2.4 requires a peer of @angular/core@^5.0.0 but none was installed. 
npm WARN @angular/cdk@5.2.4 requires a peer of @angular/common@^5.0.0 but none was installed. 
npm WARN @angular/material@5.2.4 requires a peer of @angular/core@^5.0.0 but none was installed. 
npm WARN @angular/material@5.2.4 requires a peer of @angular/common@^5.0.0 but none was installed.

有谁知道这意味着什么以及如何摆脱它？

编辑：当我检查 Angular …

迁移到 Angular 材料 5.2.2 后，我收到以下错误。在此之前，我的应用程序是 Angular 材料 2.0.0-beta.10。

更改 package.json 中的版本并运行 npm install 后，我也按照/sf/answers/3340841801/帖子中提到的步骤操作

我注意到所有Md*标签都更改为Mat*，但现在我面临错误

ERROR in .../src/app/pages/messagebox/messagebox-component.ts (2,10): Module '".../node_modules/@angular/material/material"' has no exported member 'MAT_DIALOG_DATA'.
ERROR in .../src/app/pages/messagebox/messagebox-component.ts (2,27): Module '".../node_modules/@angular/material/material"' has no exported member 'MatDialogRef'.
ERROR in .../src/app/pages/bisstatus/bisjobstatistics.component.ts (12,10): Module '".../node_modules/@angular/material/material"' has no exported member 'MatDialog'.
ERROR in .../src/app/pages/bisstatus/bisjobstatistics.component.ts (21,10): Module '".../node_modules/@angular/material/material"' has no exported member 'MatDialogRef'.
ERROR in .../src/app/pages/bisstatus/bisjoblog.component.ts (12,10): Module '".../node_modules/@angular/material/material"' has no exported member 'MatDialog'.
ERROR in .../src/app/pages/bisstatus/bisjoblog.component.ts (21,10): …

我正在使用来自 Angular Material 的 MatDatePicker。

最好我只想使用日期选择器中的日期选择视图，而没有打开它的输入字段。

我还想让日期选择器保持打开状态，因此它静态地是视图的一部分。

目前日期选择器设置如下：

<input type="text" matInput [matDatepicker]="datePickerFrom" readonly name="fromDate" [(ngModel)]="lookup.FromDate" #fromDate="ngModel">
<mat-datepicker #datePickerFrom [opened]="true" [startView]="'month'">
</mat-datepicker>

日期选择器按预期启动打开，但由于它位于前台，因此当用户单击日期选择器本身以外的任何其他地方时，它将关闭。

此外，日期选择器需要一个输入字段 - 预期用途是从输入字段打开日期选择器，并使用日期选择器视图选择日期。是否可以只使用日期选择器视图来选择一个数据，而没有输入字段？

也许 Angular Material Date Picker 不是达到这个目的的方法，所以任何替代方案都可能是这个问题的真正答案。

在具有角度材料 5.2.5 的 Angular 5 应用程序中，使用此代码时，默认选中的单选按钮正在工作，但控制台中出现错误

代码 ：

<mat-radio-group [(ngModel)]="collection">
  <mat-radio-button class="collectionRadioButton" 
   *ngFor="let coll of collections" 
   [value]="coll.endPoint" 
   [checked]="coll.isDefault" 
   (change)="clearResults()">
  {{coll.label}}
  </mat-radio-button>
</mat-radio-group>

Chrome 控制台中的错误：

ERROR Error: If ngModel is used within a form tag, either the name attribute must be set or the form control must be defined as 'standalone' in ngModelOptions.

Example 1: <input [(ngModel)]="person.firstName" name="first">   
Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
at Function.TemplateDrivenErrors.missingNameException (forms.js:5891)
at NgModel._checkName (forms.js:6244)
at NgModel._checkForErrors (forms.js:6217)
at NgModel.ngOnChanges (forms.js:6099)
at checkAndUpdateDirectiveInline (core.js:12407)
at checkAndUpdateNodeInline …

mat-sort无法处理mat-table来自另一个数据库的的一个列，其余的列则工作正常。唯一的区别是，我正在从另一服务获取该列的数据。

我试图解决它，ngAfterViewInit但无济于事。

ngAfterViewInit(){
  this.dataSource.sort = this.sort;
};

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef mat-sort-header> Resource </th>
  <td mat-cell *matCellDef="let element"> {{element.creator.name}} </td>
  <td mat-footer-cell *matFooterCellDef> </td>
</ng-container>

displayedColumns: string[] = ['projectName', 'date', 'hours', 'description', 'name', 'location', 'Edit'];

@ViewChild(MatSort) sort: MatSort;

ngOnInit(){
  this.dataSource.sort = this.sort;
}