标签: angular-material2

我有打开按钮

<button mat-raised-button (click)="openModal()
"type="button" color="primary">Open Modal </button>

单击按钮按钮时，弹出模式打开并关闭后模式。cdk-focused并将cdk-program-focused类添加到此按钮并对此产生一些连锁反应。

我想摆脱这种风格，想要删除或覆盖那些在关闭模态后添加到按钮的类*

我一直在寻找垫表中列上的过滤器的任何示例，但到目前为止还没有找到任何示例。我确实提供了一些有关方法的零碎信息，filterPredicate但没有确切地了解如何处理它。

我的需要是，单个列应该有一个过滤器，例如文本框或复选框，dataSource将根据其进行过滤。

斯塔克闪电战

在我的Angular 7应用程序中，我以反应形式使用 Angular 材料的mat-select组件。

视图如下所示：

<mat-form-field class="col-md-3" color="warn">
   <mat-select placeholder="Selectionner la boutique"
             id="libelleShop"
             [(value)]="selectedlibelleShopoValue"
             ngDefaultControl
             formControlName="libelleShop"
             (selectionChange)="onShopSelectionChanged($event)">
             <mat-option *ngFor="let shop of shopsList"
                          [value]="shop">
                {{shop.storeName}}
            </mat-option>
  </mat-select>

MD数据如下：

shopsList= [
{
    'edoId': '2119',
    'storeName': 'AIX LES BAINS'
  },
  {
    'edoId': '2123',
    'storeName': 'ANNEMASSE'
  },
  {
    'edoId': '2460',
    'storeName': 'ALENCON'
  },
  {
    'edoId': '2478',
    'storeName': 'Grand Evreux Carrefour'
  },
  {
    'edoId': '2632',
    'storeName': 'DESTRELAND'
  }
]

第一次加载后，选项成功显示在选择下拉列表中，并且我有一个按钮用于在单击时强制选择垫子的值。

我已经尝试过这个：

onClick(){
    let shopObjToDisplay = {};
    shopObjToDisplay['edoId'] = '2460';
    shopObjToDisplay['storeName'] = …

我正在使用 Angular 材料的拖放模块来移动一些元素。

更具体地说，我有多个cdkDropLists，cdkDrag每个都有一个：

<div *ngFor="let l of lists">
  <div cdkDropList [cdkDropListConnectedTo]="all_lists">
    <div cdkDrag>
      content
    </div>
  </div>
</div>

每当我从列表中移动元素时，我希望有一个占位符，例如：

 <div cdkDrag>
      content
      <div *cdkDragPlaceholder>
          placeholder content
      </div>
 </div>

但是，当我执行此操作时，会显示占位符内容，以代替丢失（当前正在拖动）的元素（源列表）以及其新位置（接收器列表）。我希望能够保留content接收器列表的默认行为（显示根元素又名），并仅使用源列表的占位符。

不过，我无法区分这两个位置，因为即使在“接收器”位置，也显示了源元素的 HTML（这有点道理，因为占位符是 a 的属性，cdkDrag而不是cdkDropList）。

如何使用不同的占位符来代替元素的原始位置和新位置？

堆栈闪电战示例。

直觉：（多个）列表是一副牌，当将一张牌从 A 移动到 B 时，我在 A 牌组中看到一张倒数第二张（自定义占位符）牌，但是当我将顶部 A 卡悬停在 B 上时，我看到上面的 A 卡。

我通过循环*ngFor 动态显示卡片.我想根据某些条件更新卡背景颜色.例如,如果某些条件满足,卡片背景为绿色.否则,卡背景颜色不变或更改为红色.如何在Angular 2中实现这种动态行为？我尝试使用*ngIf,但随后布局搞砸了.我只想根据条件更改背景颜色,而不会影响任何布局更改.对于响应行为,我使用flex布局.

<div fxLayout="row" fxLayoutWrap style="padding-bottom: 25px; 
                                        padding-top: 25px;
                                        margin: auto;
                                        justify-content: center">  
    <md-card fxFlex.gt-md="45" 
             fxFlex.md="45" 
             fxFlex.sm="auto" 
             fxFlex.xs="100" 
             *ngFor="let data of myArray"
             [style.background]="'lightBlue'"
              style="margin:5px;">

        <md-card-content>
            <h1></h1>
            <h2></h2>
            <h2></h2>
        </md-card-content>
    </md-card> 
</div>

根据材料设计规范：

在台式机上，卡片的静止高度可以为0dp，悬停时可以达到8dp。

如何使用Angular Material 2创建此动画效果？

我考虑过(hover)=用动画来做这个。我不太在乎这种方法，我希望它在悬停时提升。原因是，我在用户界面中将卡片用作按钮。

是否可以在Angular Material 2中插入链接MatSnackBarModule？

我已尝试在文本中执行此操作,但它将html显示为文本.

const text = '<a routerLink="/login">login</a>';
this.snackBar.open(text, 'OK', {
  duration: environment.snackBarTime,
});

我使用角度材料设计,当我点击菜单按钮时,选项显示在按钮顶部.

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item>Item 1</button>
      <button mat-menu-item>Item 2</button>
    </mat-menu>

如何在按钮下方显示选项,如下图所示

我正在使用角度材料2选项卡,我想在一个选项卡中有下一个按钮,单击后导航到另一个选项卡.我应该用什么来实现这个功能？

我只想添加一个小的圆形个人资料图片，我不希望它出现在“卡片”中，并且类似这样的方法实际上有效：

<img mat-card-avatar src="avatar.png" alt="User Avatar">

那<img>没有包含在<mat-card>元素中，即使它起作用了，我也想知道解决方案的合法性和可能的​​副作用。那么可以像在mat-card元素外部那样使用mat-card-avatar吗？

同样，我花了很长时间才找到该指令，为什么头像通常在其他情况下可以使用，所以将头像名称间隔为卡片的一部分？例如，我在垫子工具栏中有它。