标签: angular-material

我想在我的垫子多选下拉菜单中添加搜索功能。我在 Jquery 中做过这件事，但我想在 Angular 材料中做同样的事情。这是设计图。 这是图像

我使用角材料 mat-tab-nav-bar

我在屏幕右侧有侧边菜单，点击它改变侧边菜单的宽度，中心屏幕宽度根据菜单宽度变化。

问题是 mat-ink-bar 的右/左位置没有改变。

任何的想法？

我想弄清楚如何更改 mat-tab 标签的颜色。我已经浏览了与样式 mat-tabs 相关的所有堆栈溢出帖子，但没有一个解决方案将文本颜色从白色更改为黑色；现在它看起来像这样。您甚至看不到非活动选项卡。

如何让非活动链接显示为黑色？

<div class="buttonRow">
  <mat-tab-group id="linkLabel" mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4" >
    <div class="tabContent" >
      <mat-tab id="tab1" label="Tab1" >  Content 1 </mat-tab>
      <mat-tab id="tab2" label="Tab2"> Content 2 </mat-tab>
      <mat-tab id="tab3" label="Tab3"> Content 3 </mat-tab>
    </div>
    </mat-tab-group>

</div>

我正在使用的 css 目前正在运行

::ng-deep.mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled),
::ng-deep.mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled) {
  background-color: green;

  color: white;
  opacity: 1;
}

内森回答的最终结果

我尝试在 Mat-table 中打印我的数据。

我非常接近，但我无法完成我的前端。

我的数据是：

0: {Group: 1, Rules: Array(1), Title: "NAME"}
1: {Group: 2, Rules: Array(2), Title: "TERRITORY"}

And the array for Group 1 have rules like this (and so on for Group 2):
0: {Date: "1990-01-01", NewRules: 0, Rules: "Ligue Name", Id: 1}
1: {Date: "1990-01-01", NewRules: 1, Rules: "Other rules", Id: 2}

这是 .html 代码：

<mat-card-content>
  <table mat-table [dataSource]="rules$ | async" class="mat-elevation-z8">

    <!-- DateModifier Column -->
    <ng-container matColumnDef="Date">
      <th mat-header-cell *matHeaderCellDef>Date</th>
      <td mat-cell *matCellDef="let element">
        {{ element.Reules[0].Date …

角度版本：v9

我有一个按钮，它的垫子图标是一个指向左侧的箭头。我想知道 mat-icon 元素标签是否有任何属性可以让我控制箭头的方向，使其指向上方。

为了学习的目的，我更喜欢通过 angular.js 中的属性来学习如何做到这一点，而不是寻找另一个可以实现我想要的图标。

我在网上搜索，但找不到解决方案。因此这个问题。帮助表示赞赏。谢谢

我将如何发出对象而不是原始数据类型？

我有一个const amount = { currenty: 'USD', total: '10.25' }; 我想发送给父组件的对象。

export class MyChildComponent implements OnInit {
     @Output() childEventEmitter: EventEmitter = new EventEmitter();
....
}

在发射器函数中

this.childEventEmitter.emit(amount); // 不工作

错误：{ currenty: 'USD', total: '10.25' } 类型的参数不可分配给字符串类型的参数

Compiling @ng-bootstrap/ng-bootstrap : module as esm5
Error: Error on worker #1: Error: Failed to compile entry-point @ng-bootstrap/ng-bootstrap (module as esm5) due to compilation errors:
node_modules/@ng-bootstrap/ng-bootstrap/rating/rating.js:148:43 - error NG1006: Cannot combine @Input decorators with query decorators

148         "starTemplate": [{ type: Input }, { type: ContentChild, args: [TemplateRef,] },],
                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@ng-bootstrap/ng-bootstrap/rating/rating.module.js:12:51 - error NG6001: The class 'NgbRating' is listed in the declarations of the
NgModule 'NgbRatingModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's …

如何在 Angular 中创建一个月份日期选择器，不包括隐藏日期和年份？

此以下链接将执行月份和年份选择器。我试图操纵它只做 Month Only。如何配置？

闪电战：

https://stackblitz.com/angular/gxymgjpprdy?file=src%2Fapp%2Fdatepicker-views-selection-example.ts

结果应该是这样的，发出的值可以是例如 May：a) 5 或 b) 2020 年 5 月 1 日。我可以删除 Day 和 year later 。

资源：Angular Material DatePicker：月和日，不包括年

我的 Angular 9 项目出现问题，其中拖放功能无法始终如一地工作。每当我尝试将对象拖到其目标位置时，拖放永远不会完成。大多数情况下，对象会返回其原始位置，或者在我要将对象移动到的目标位置之前或之后移动到另一个位置。这是我的代码：

<div class="col-sm-12">

          <div cdkDropList class="example-list cdk-drop-list-receiving" (cdkDropListDropped)="drop($event)">
            <ng-container *ngFor="let word of Words; let i = index;">
                <div class="row" *ngIf="((i % 2) == 0)"  style="margin-right: 0px; margin-left: 0px;" >
                  <div class="col-sm-1 text-center" style="padding: 20px 10px; border: 1px solid black"> {{ i }}</div>
                  <div class="col-sm-5 text-center example-box"  style="border: 1px solid black" cdkDrag ><div class="example-custom-placeholder" *cdkDragPlaceholder></div>{{ Words[i].Title }}</div>
                  <div class="col-sm-1 text-center" style="padding: 20px 10px; border: 1px solid black"> {{ i+1 }}</div>
                  <div class="col-sm-5 text-center example-box" *ngIf="Words[i+1] !== undefined" style="border: …

我是 angular 的新手，自 5 月以来一直在用它进行一个新项目。现在我们需要在这个现有项目中添加材质微调器，但微调器并没有真正旋转。它只显示一个静态圆圈，我已经尝试了不同的模式。我真的不知道我错过了什么，我想知道如何调试它，因为我没有收到任何错误。

这是我的设置：

包.json

"@angular/animations": "^7.2.16",
"@angular/cdk": "^7.3.7",
"@angular/common": "^7.2.16",
"@angular/compiler": "^7.2.16",
"@angular/core": "^7.2.16",
"@angular/forms": "^7.2.16",
"@angular/material": "^7.3.7",
"@angular/platform-browser": "^7.2.16",
"@angular/platform-browser-dynamic": "^7.2.16",
"@angular/router": "^7.2.16",

我将此添加到 UiModule 中：

import { MatDialogModule, MatProgressSpinnerModule } from '@angular/material';
...
@NgModule({ imports: [UiSharedModule, DpDatePickerModule, FontAwesomeModule, MatDialogModule, MatProgressSpinnerModule],
  exports: [
    ButtonComponent,
    DropdownComponent,
    InputComponent,
    TabListComponent,
    TabContentComponent,
    DatePickerComponent,
    CardComponent,
    SpinnerComponent
  ],
  declarations: [
    ButtonComponent,
    DropdownComponent,
    InputComponent,
    TabListComponent,
    TabContentComponent,
    DatePickerComponent,
    CardComponent,
    SpinnerComponent
  ]
})

在html中我尝试了这两个版本：

<mat-progress-spinner mode="indeterminate"></mat-progress-spinner>

和

<mat-spinner></mat-spinner>

我也在我的一个 angular-tutorial 项目中尝试了同样的方法，它运行良好！所以我也想，我需要做一些角度更新吗？