小编Que*_*tin的帖子

因此，目前，我正在使用角度材质及其默认滚动（但我认为这是完美的滚动条），可以用作滚动条的滚动设计。但是，仅在用户尝试滚动页面/ div时才显示滚动。我试图阅读Angular Material的滚动api，但是这里没有可以使用的属性。我overflow-y: scroll当然已经把它放在css上了。任何的想法？谢谢！

我正在使用带有自定义标题的Angular Material的datePicker，并想在datepicker标题中添加一个按钮，使我可以转到datepicker的“多年”视图。

我试图更改startView，但仅在启动datepicker选择时才更改视图。

不幸的是，我发现没有功能允许我选择日期选择器的视图。

HTML：

<mat-form-field class="px-3">
  <input matInput [matDatepicker]="datePicker"
                  placeholder="Sélectionnez une période"
                  formControlName="selectedPeriod"
                  readonly
                  [min]="minDate" [max]="maxDate"
                  [matDatepickerFilter]="filterDate">
  <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
  <mat-datepicker #datePicker touchUi
                  startView="multi-year"
                  (yearSelected)="chosenYearHandler($event)"
                  (monthSelected)="chosenMonthHandler($event, datePicker)"
                  [calendarHeaderComponent]="exampleHeader">
  </mat-datepicker>
</mat-form-field>

日期选择器的标题：

<div class="example-header">
 <button mat-icon-button class="example-double-arrow" 
         (click)="previousClicked()">
   <mat-icon>arrow_back</mat-icon>
 </button>
 <span class="example-header-label">{{periodLabel}}</span>
 <button mat-icon-button class="example-double-arrow" 
         (click)="closeClicked()">
   <mat-icon>close</mat-icon>
 </button>

export class ExampleHeader<Moment> implements OnDestroy {

 private destroyed = new Subject<void>();
 @ViewChildren('datePicker') datePicker: MatDatepicker<Moment>;

 constructor(@Host() private calendar: MatCalendar<Moment>,
          private dateAdapter: DateAdapter<Moment>,
          private datepicker: MatDatepicker<Moment>,
          @Inject(MAT_DATE_FORMATS) private dateFormats: MatDateFormats,
          cdr: ChangeDetectorRef) {
              calendar.stateChanges …

我将 Angular Material 的 mat-menu 与不同的 mat-menu-item 一起使用，并且我希望菜单项列表与按钮的大小相同。

这就是我所拥有的：

还有我的愿望：

我试图用 css 更改菜单的大小，但它无法正常工作。

CSS：

.cdk-overlay-pane {width: 100%;}
.mat-menu-panel {width: 100%;}

HTML：

<button mat-raised-button [matMenuTriggerFor]="menu" class="btn-block btn-blue">
  <div fxLayout="row" fxLayoutAlign="center center">
    <mat-icon>more_vert</mat-icon>
    <span fxFlex>OPTION</span>
  </div>
</button>

<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-icon>unarchive</mat-icon>
    <span>First</span>
  </button>
  <button mat-menu-item>
    <mat-icon>file_copy</mat-icon>
    <span>Second</span>
  </button>
</mat-menu>

我在这里为我的 mat-menu做了一个StackBlitz。

先感谢您！

编辑：我更改了我的代码，因为我使用的是带有引导程序类“btn-block”的响应式按钮。

我使用 Angular-Material mat-table Flex，我希望额外的内容不要像这样显示。

这就是我所拥有的：

而我想要的是：

我尝试使用text-overflow: ellipsis，但如果有人有想法，它不起作用，我很感兴趣。

StackBlitz在这里

谢谢

当我将鼠标移到mat-form-field.

为了能够使用彩色垫卡，我加了一些CSS类style.scss来改变background-color的mat-form-field。

.mat-form-field-appearance-outline .mat-form-field-outline-start { background-color: white!important; }
.mat-form-field-appearance-outline .mat-form-field-outline-gap { background-color: white!important; }
.mat-form-field-appearance-outline .mat-form-field-outline-end { background-color: white!important; }
mat-form-field mat-label { background-color: rgba(255, 255, 255, 0.9); }

它工作正常，但是当我将鼠标悬停在 a 上时mat-form-field，背景会在几分之一秒内变成红色。不幸的是，我找不到允许我删除此透明度的 CSS 类。

StackBlitz： 这里

我在两件事上遇到了麻烦：

1. 隐藏 mat-radio-group 的圆圈
2. 如果选中，请将 p 标签背景更改为蓝色

我尝试使用 ::ng-deep 覆盖 css 属性并将颜色更改为白色，尝试配置 invisibility:hidden 但没有成功。另外，我尝试使用 ngStyle 配置 p 标签的背景颜色如果选中则为蓝色，但它不起作用。

这是 HTML：

<div class="container-fluid">
  <header class="lesson-heading" *ngIf="currentQuestion">
    <span class="title"></span>
    <h2>Question {{currentIndex + 1}}/{{quiz.questions.length}}</h2>
  </header><!-- end lesson-heading -->
  <div class="question-block">
    <form #quizForm="ngForm" (ngSubmit)="onSubmit()">
      <h4>{{currentQuestion.question}}</h4>
      <div class="form-group">
        <mat-radio-group [(ngModel)]="userAnswers[currentIndex]" name="answer" class="form-control">
          <ul class="items answers-list">
            <li><mat-radio-button [value]=1><p>1. {{currentQuestion.answer1}}</p></mat-radio-button></li>
            <li><mat-radio-button [value]=2><p>2. {{currentQuestion.answer2}}</p></mat-radio-button></li>
            <li><mat-radio-button [value]=3><p>3. {{currentQuestion.answer3}}</p></mat-radio-button></li>
            <li><mat-radio-button [value]=4><p>4. {{currentQuestion.answer4}}</p></mat-radio-button></li>
          </ul>
        </mat-radio-group>
      </div>
    </form>
  </div>
</div>

和 SASS 文件：

/*click effect color change*/
::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element
  background-color: …

我面临一个问题，我想在我的代码中将重点放在基于可观察数据的条件输入上。在我的示例中，我只是true在ngOnInit().

export class InputOverviewExample implements OnInit {
  bool: boolean;

  @ViewChild("input1", { static: true }) input1: MatInput;
  @ViewChild("input2", { static: true }) input2: MatInput;

  ngOnInit() {
    this.bool = true;
    this.input1.nativeElement.focus();
    this.input2.nativeElement.focus();
  }
}

我注意到当 a 处于条件状态时，焦点不起作用mat-form-field。

<form class="example-form">
  <h3>Without *ngIf :</h3>
  <mat-form-field appearance="outline" class="example-full-width">
    <input matInput #input1 placeholder="Auto focus" value="Test_input1" />
  </mat-form-field>

  <h3>With *ngIf :</h3>
  <mat-form-field appearance="outline" class="example-full-width" *ngIf="bool">
    <input matInput #input2 placeholder="Auto focus" value="Test_input2" />
  </mat-form-field>
</form>

StackBlitz 链接

有人会解决这个问题

谢谢

在我的代码中，我有 6 个不同大小的对象列表。

我需要按照特定的顺序浏览它们，从最小的列表到最大的。

var list_1 = [...]    // length 24
var list_2 = [...]    // length 4
var list_3 = [...]    // length 3
var list_4 = [...]    // length 4
var list_5 = [...]    // length 11
var list_6 = [...]    // length 2

// Need code here for loop each list in order asc
list_6.forEach(...)   // length 2
list_3.forEach(...)   // length 3
list_2.forEach(...)   // length 4
list_4.forEach(...)   // length 4
list_5.forEach(...)   // length 11
list_1.forEach(...)   // length …