小编Edr*_*ric的帖子

我开始在我的一个项目中使用 Material。查看<mat-autocomplete>文档网站的示例...

<mat-form-field class="example-full-width">
  <input matInput placeholder="State" aria-label="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
    <mat-autocomplete #auto="matAutocomplete">
    <mat-option *ngFor="let state of filteredStates | async" [value]="state.name">
    <span>{{state.name}}</span> |
  </mat-option>
</mat-autocomplete>

ts：

    export class AutocompleteOverviewExample {        
      stateCtrl = new FormControl();
      filteredStates: Observable<State[]>; 
      states: State[] = [
            { name: 'Arkansas'  },
            ...
            { name: 'Texas' }
          ];

          constructor() {
            this.filteredStates = this.stateCtrl.valueChanges
              .pipe(
                startWith(''),
                map(state => state ? this._filterStates(state) : this.states.slice())
              );
          }

          private _filterStates(value: string): State[] {
            const filterValue = value.toLowerCase();
            return this.states.filter(state => state.name.toLowerCase().indexOf(filterValue) …

我遇到了一个问题，我需要为*ngFor角度4中的循环内的每个数据行提供唯一的id值。

我的代码是这样的：

<div *ngFor="let row of myDataList">
  <div id="thisNeedsToBeUnique">{{ row.myValue }}</div>
</div>

当我将Angular 6 Material Date Picker与任何遮罩（ngx-mask，angular2-mask，angular2-text-mask）结合使用并使用时formControlName，出现错误：

错误：多个自定义值访问器将表单控件与未指定名称属性匹配

是否有适用于“物料日期选取器”和formControlName属性的蒙版？

<input matInput [matDatepicker]="myDatepicker" formControlName="dateOfbrd" mask="00/00/0000">
  <mat-error *ngFor="let validation of validationMessages.dateOfDischarge">
  <mat-error class="error-message" *ngIf=enrfrm.get('dateOfbrd').hasError(validation.type)">
    {{validation.message}}
  </mat-error>
</mat-error>
<mat-datepicker-toggle matSuffix [for]="myDatepicker"></mat-datepicker-toggle>
<mat-datepicker #myDatepicker></mat-datepicker>

组件： https: //material.angular.io/components/snack-bar/examples

我有一个页面是父部分（'#wrapper_container'）。我想在“#wrapper_element”的子元素的中心弹出小吃栏。

谢谢

产生一个OutlineButton带有白色边框的：

OutlineButton(
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.purple
    )
  ),
)

生成FlatButton带有紫色边框的 a：

FlatButton(
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.purple
    )
  ),
)

部分文档OutlineButton：

边界边？BorderSide 定义按钮启用但未按下时边框的颜色，以及边框轮廓的宽度和样式。[...] 最终的

我有一个 Angular Material mat-table，我将 CSS 样式用于替代行颜色。这是 CSS 样式：

.mat-row:nth-child(even){
    background-color: #e4f0ec;
}

.mat-row:nth-child(odd){
    background-color:#ffffff;
}

当我的 mat-table 没有定义子行时，这有效。当我添加另一个ng-container用“expandedDetail”指定的时，这不再起作用。所有行都是白色的，但展开的子行是彩色的。

我按照 material.angular.io 中的示例进行操作

我看到了行样式的其他示例，但他们使用 tr 标签。在示例和我的代码中，我ng-container为每一列使用了 an 、 th 和 td 标签。

任何帮助表示赞赏。

我将项目添加到 stackblitz

https://stackblitz.com/edit/angular-4bcxtv

这是我使用的 HTML 代码

<table mat-table
       [dataSource]="dataSource" multiTemplateDataRows
       class="mat-elevation-z8">
  <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
    <th mat-header-cell *matHeaderCellDef> {{column}} </th>
    <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
  </ng-container>

  <!-- Expanded Content Column - The detail row is made up of this one column …

我将 Angular 7 与 Material Snackbar 一起使用。我想将 Snackbar 的颜色更改为绿色。

在 app.component.ts 中，我有：

this.snackBarRef = this.snackBar.open(result.localized_message, 'X', {
    duration: 4000,
    verticalPosition: 'top',
    panelClass: 'notif-success'
});

this.snackBarRef.onAction().subscribe(() => {
    this.snackBarRef.dismiss();
});

在 app.component.scss 中，我有：

.notif-success {
    color: #155724 !important; // green
    background-color: #d4edda !important;
    border-color: #c3e6cb !important;
    .mat-simple-snackbar-action {
        color: #155724 !important;
    }
}

但是 Snackbar 仍然以其默认颜色显示。

我可以看到notif-success 类已经应用到snackbar

<snack-bar-container class="mat-snack-bar-container ng-tns-c18-84 ng-trigger ng-trigger-state notif-success mat-snack-bar-center mat-snack-bar-top ng-star-inserted" role="status" style="transform: scale(1); opacity: 1;">

为什么自定义 css 不起作用？

我想在我的 Angular 项目中使用 mdc-image-list。我收到一个错误：

@import "@material/feature-targeting/functions";
       ^
      Can't find stylesheet to import.
   ?
21 ? @import "@material/feature-targeting/functions";
   ?         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ?
  node_modules/@material/image-list/_mixins.scss 21:9         @import
  node_modules/@material/image-list/mdc-image-list.scss 21:9  @import
  stdin 2:9                                                   root stylesheet

我按照https://material.io/develop/web/components/image-lists/的安装步骤操作，但我仍然收到此错误。我尝试再次删除node_modules和 npm 安装。我不确定我的 sass-loader 是否有问题，因为我使用了 Material 的布局网格，导入了@import "@material/layout-grid/mdc-layout-grid";它并且工作正常。什么可能出错？

最近，我将 GCM 迁移到 FCM，经过一番挣扎，在这个伟大社区的帮助下，我设法使一切正常。

现在，当我在旧版本的 Android（牛轧糖）上测试通知时，它不起作用，应用程序崩溃，我发现它与版本相关，因为旧版本不支持渠道管理器。

我在 StackOverflow 上找到了几个解决方案，但我还没有找到适合我的问题的解决方案，所以我希望有人能给我一个提示或解决方案。

我感谢所有的答案和帮助。

public class MessagingService extends FirebaseMessagingService {

private static final String TAG = "FCM Message";

public MessagingService() {
    super();
}



@TargetApi(Build.VERSION_CODES.O)
@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
@Override
public void onMessageReceived(RemoteMessage remoteMessage) {
    super.onMessageReceived(remoteMessage);

    String message = remoteMessage.getData().get("team");



    Intent intent=new Intent(getApplicationContext(),MainActivity.class);
    String CHANNEL_ID="channel";
    Uri defaultSound = RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION);
    NotificationChannel notificationChannel=new NotificationChannel(CHANNEL_ID,"channel",NotificationManager.IMPORTANCE_HIGH);
    PendingIntent pendingIntent=PendingIntent.getActivity(getApplicationContext(),1,intent,0);
    Notification notification=new Notification.Builder(getApplicationContext(),CHANNEL_ID)
            .setContentText(message)
            //  .setContentTitle(title)
            .setSound(defaultSound)
            .setContentIntent(pendingIntent)
            .setChannelId(CHANNEL_ID)
            .setSmallIcon(android.R.drawable.sym_action_chat)
            .setWhen(System.currentTimeMillis())
            .setPriority(Notification.PRIORITY_MAX)
            .build();

    NotificationManager notificationManager=(NotificationManager) getSystemService(Context.NOTIFICATION_SERVICE);
    notificationManager.createNotificationChannel(notificationChannel);
    notificationManager.notify(1,notification);
}

}

我正在尝试<mat-slide-toggle>Click me!</mat-slide-toggle>在已经MatSlideToggleModule导入的组件中使用，但我仍然收到消息，表明它不是已知元素。

角度版本：8.0.1

HTML 页面 (slide-page.html)

<div class="grid-slide-toggle-material"> 
  <mat-slide-toggle>Click me!</mat-slide-toggle>
</div>

模块 (slide-page.module.ts)

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 
import { CommonModule } from '@angular/common';
import { MaterialModule } from 'projects/authenticator/src/shared/modules/material.module';
import { BasicModule } from 'src/app/shared/modules/basic/basic.module';
import { MatButtonToggleModule, MatButtonToggleGroup } from '@angular/material';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@NgModule({
  declarations: [],
  imports: [
    MaterialModule,
    ReactiveFormsModule,
    CommonModule,
    FormsModule,
    MatButtonToggleModule,
    MatSlideToggleModule 
  ]
})
export class SlidePageModule { } …