标签: angular-material2

我有三个标签：label1,label2和label3。每一个内部都有另一组选项卡。现在默认label1显示所选样式及其tab1内部。现在，一旦我点击另一个标签，就像label 2另一组标签加载，但没有一个标签显示突出显示。也一样label3。我必须明确单击选项卡才能查看样式。

请找到该问题的链接：https : //stackblitz.com/edit/angular-tyjslw?file=app/tabs-template-label-example.html

当我在下面的 matAutocomplete formControl 中选择一个项目时，我总是得到 ID，而不是下拉列表中显示的值。

当我将 [value]="baseCoin.ID" 更改为 [value]="baseCoin.Abbr" 时，当我选择一个项目时会显示正确的字符串，但是，我需要 (ngModelChange) 事件将 baseCoin.ID 返回到一个方法，而不是 baseCoin.Abbr。

<mat-form-field>
    <input matInput placeholder="Base Coin" aria-label="Base Coin" [matAutocomplete]="basecoin" [formControl]="baseCoinCtrl" [(ngModel)]="newTrade.BaseCoin.Abbr" (ngModelChange)="populateMarketCoins( $event )">
    <mat-autocomplete #basecoin="matAutocomplete">
        <mat-option *ngFor="let baseCoin of filteredBaseCoins | async" [value]="baseCoin.Abbr">
            {{baseCoin.Abbr | uppercase}}
        </mat-option>
    </mat-autocomplete>
</mat-form-field>

我错过了什么吗？

帮助表示赞赏。谢谢。

以下是一个 HTML 代码片段，其中 ngIf 检查为forceAngletrue，默认情况下forceAngle为 false。单击按钮后，我调用该ForceAngles()函数并将其设置forceAngle为 true。问题是一旦设置为 true，ngIf 应该检查状态并显示正确的模板。目前我没有得到预期的变化。我是这个域的新手，在互联网上冲浪了几个小时以获得适当的解决方案。我想我错过了一个 Angular 基础知识。在这方面需要专家支持。

<ng-container matColumnDef="AssemblyAngle">
            <mat-header-cell *matHeaderCellDef [ngClass]='txt-wrapper'> Assembly Angles</mat-header-cell>
            <div *ngIf="forceAngle == 'true' ; else inputtemplate;">
              <mat-cell *matCellDef="let element">
                <span class="txt-inner">{{forceAngle}}</span>
              </mat-cell>
            </div>
            <ng-template #inputtemplate>

              <mat-cell *matCellDef="let element" class="txt-wrapper mat-header-cell">
               abc
              </mat-cell>
            </ng-template>
      </ng-container>

<button class="btn-secondary" (click)="ForceAngles()">Force Angles</button>

.ts 文件

ForceAngles() {
  this.forceAngle = 'true';
  
  this.loadCompressorOptimizeData();
  console.log(this.forceAngle);
  return this.forceAngle;
}

我将使用 dataSource 作为数组的材料数据表。

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
import { AjouttextService } from '../ajouttext.service';
import { DataSource } from "@angular/cdk/collections";
import { Observable } from "rxjs/Observable";
import { nomchamp } from '../model';

@Component({
  selector: 'app-datatable',
  templateUrl: './datatable.component.html',
  styleUrls: ['./datatable.component.css']
})
export class DatatableComponent implements OnInit {

  constructor(private dataService: AjouttextService) { }
  data: nomchamp[] = [{ id: "33", text: "HAHA" }, { id: "55", text: "bzlblz" }];

  displayedColumns = ['text'];
  dataSource = this.data; …

我相信这个问题与关键字“this”没有分配给我假设的内容有关。

我正在使用 Angular 5 和 WordCloud 包。https://github.com/timdream/wordcloud2.js/blob/gh-pages/API.md

有一个单击回调函数，它返回在回调中单击的单词的单个字符串。当用户点击这个词时，我需要它来调用另一个函数并显示一个模态。

组件.ts

import { Component, OnInit, Input } from '@angular/core';
const WordCloud = require('wordcloud');

import { MatDialog, MAT_DIALOG_DATA } from '@angular/material';
import { TopWordsModalComponent } from './top-words-modal/top-words-modal.component';

@Component({
    selector: 'app-top-words',
    templateUrl: './top-words.component.html',
    styleUrls: ['./top-words.component.scss']
})

export class TopWordsComponent implements OnInit {

    @Input() report;
    categories: any = null;
    filterForm: FormGroup;

    constructor(private fb: FormBuilder, public modal: MatDialog) {

    }

    ngOnInit() {

        const all_words = this.report.activity.top_words;

        this.generateWordCloud(all_words);

    }

    generateWordCloud(words) {

        WordCloud(document.getElementById('word_cloud'), {

            list: words,
            click: …

我有以下调色板，具有各种色调值，应用于我的material-theme.scss文件中的多个主题：

$green: mat-palette($mat-green, A400);
$blue: mat-palette($mat-light-blue, A400);
$red: mat-palette($mat-red);
$red-warn: mat-palette($mat-red, A100);

在我的material-styles.scss文件中，我有一个用于根据当前主题定义样式的 mixin：

@mixin style-theme($theme) {
  $p: map-get($theme, primary);
  $a: map-get($theme, accent);
  $w: map-get($theme, warn);
  $primary: mat-color($p);
  $accent: mat-color($a);
  $warn: mat-color($w);
  $primary-contrast: mat-contrast($p, 500);
  $accent-contrast: mat-contrast($a, 500);
  $warn-contrast: mat-contrast($w, 500);

  // Apply styling based on values above
}

主题创建如下：

.light-green {
    $default-theme: mat-light-theme($green, $blue);
    @include style-theme($default-theme);
    @include angular-material-theme($default-theme);
}

我有可能获得当前应用调色板的对比度吗？就像现在一样，我只能硬编码函数的$hue值mat-contrast。

StackBlitz 演示

在下面的代码中，我的国家/地区选择选项被多次触发以致浏览器停止响应。

<div [formGroup]="countryForm">
  <mat-form-field>
    <mat-select formControlName="selectedCountry" class="my-item-text" placeholder="Country">
      <mat-option (onSelectionChange)="onCountrySelectionChanged($event)" *ngFor="let myCountry of countries" [value]="myCountry.short" class="my-item-text">{{ myCountry.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

和我的组件代码如下

  onCountrySelectionChanged(changeEvent) {
    if (changeEvent && changeEvent.isUserInput && this.selectedCountry != changeEvent.source.value) {
      this.countrySelected.emit( changeEvent.source.value);
    }
  }

我试图通过检查它的用户更改事件 [isUserInput] 并检查值是否真的改变来进行限制！现在可以减少火灾事件并且应用程序正常工作。

有没有更好的方法来使用选择选项，因为我现在在使用 mat-select 组件的任何地方都包括上述逻辑。

我正在尝试将固定宽度的 MatDialog 水平居中：

let dialog = this.dialog.open(EditVisitPopupComponent,
  { data: { visit: this.visit }, width: '100%', maxWidth: '500px' });

出于某种原因，添加width参数会justify-content: flex start向父叠加层添加内联，而我希望它保持不变justify-content: center。

我知道创建模态的方法，包括创建一个Overlay并将组件注入其中。但我不明白为什么我不能简单地使用MatDialog.

我试过的：

let dialog = this.dialog.open(EditVisitPopupComponent,
      { data: { visit: this.visit }, position: this.overlay.position().global().centerVertically().centerHorizontally(), width: '100%', maxWidth: '500px' });

但类型不匹配。

我也试过backdropClass和一个兄弟 CSS 选择器，但我没有得到想要的结果。

我错过了什么？有没有办法配置Overlaya 的MatDialog？

我正在尝试在我的项目中使用 Angular Material 并且导入了标签，但并非所有样式都在那里。

在我的 HTML 中：

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>

它应该显示：

但它显示：

我添加@import "~@angular/material/prebuilt-themes/indigo-pink.css";到 style.css 并且日历显示正常，但文本字段看起来仍然很糟糕。

我正在尝试执行angular material website 中提供的示例以进行自动完成，当我在应用程序中实现它时，选项出现在其他地方而不是在输入下，如图所示

我目前在html 文件中有以下代码

<form class="example-form">
    <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">
          <img class="example-option-img" aria-hidden [src]="state.flag" 
            height="25">
          <span>{{state.name}}</span> |
          <small>Population: {{state.population}}</small>
        </mat-option>
      </mat-autocomplete>
    </mat-form-field>
</form>

import { FormControl } from '@angular/forms';
import { Observable } from 'rxjs';
import { map, startWith } from 'rxjs/operators';

  stateCtrl = new FormControl();
  filteredStates: Observable < State[] >;

  states: State[] = [
    {
      name: …