标签: angular-material

我正在使用 Angular 6 和 Angular Material 6。在这里，我尝试使用面包屑创建多级菜单。我已经正确使用了多级菜单，但无法使用选定的面包屑导航菜单。当我单击选定的面包屑时，菜单无法正确组织。

我的演示链接：stackblitz 链接在这里

我尝试从基于材料的表单控件切换到“普通”控件，但我似乎无法找到compareWith使用此版本的方法。

我看过很多（非常简单的）例子，并尝试重新创建最简单的场景：

@Component({
  selector: 'app-root',
  template: `<form>
    <select [formControl]="plainControl" [compareWith]="comp">
      <option *ngFor="let option of options" value="option">{{option}}</option>
    </select>
    <mat-select [formControl]="matControl" [compareWith]="compMat">
      <mat-option *ngFor="let option of options" value="option">{{option}}</mat-option>
    </mat-select>
  </form>`
})
export class AppComponent {
  options = [1,2,3,4,5];
  plainControl = new FormControl({id: 3, name: 'foo'});
  matControl = new FormControl({id: 3, name: 'bar'});

  comp(o1: any, o2: any): boolean {
    console.log('Comparing Plain');
    return o1 == o2;
  }
  compMat(o1: any, o2: any): boolean {
    console.log('Comparing Material');
    return o1 == o2;
  }
}

正确 …

是否可以隐藏步进器中活动步骤的垂直线？

我想将表单内容移至左侧，以便在手机上有更多的工作空间。但我无法找到仅针对活动步骤隐藏垂直线的解决方案。

任何帮助，将不胜感激。

谢谢。

以下是上述场景的 stackblitz 示例。

https://stackblitz.com/angular/mdvpkdeqqry?file=app%2Fstepper-vertical-example.ts

我正在将引导形式转换为材料形式。在下面的照片中，我希望 mat-form-field 看起来像第二个引导输入

但我无法在 matInput 上获得标签

我尝试过在标签标记中使用 for 属性：

            <div class="form-group">
                <label for="paysAdresse">Pays : </label>
                <mat-form-field appearance="outline">
                    <mat-label>Pays :</mat-label>
                    <input matInput id="paysAdresse"  formControlName="pays" placeholder="pays">
                </mat-form-field>
            </div>
            <div class="form-group">
                <label for="voieAdresse">Voie : </label>
                <input id="voieAdresse" formControlName="voie" type="text" class="form-control form-control-sm" >
            </div>

但它给了我同一行的标签和输入。我怎样才能达到想要的结果？

我想为悬停时的所有节点添加背景颜色：

.mat-tree-node {
  :hover {
    background-color: rgba(255, 220, 0, 0.1) !important;
  }
} 

尽管“fruit”节点具有“mat-tree-node”类，但它仅适用于叶子

来源

尝试将 Angular 放在mat-icon包含的中心div：

<div style="background-color: yellow;
            display: flex; 
            flex-direction: column;
            width: 100px;
            height: 120px; 
            align-items:center; 
            justify-content: center; ">
    <mat-icon style="font-size: 60px;">
    account_circle
    </mat-icon>
</div>

它没有居中。 这是 stackblitz 演示。

我注意到，当使用开发人员工具显示轮廓时mat-icon，它显示元素的实际尺寸位于中间，但该元素的内容溢出了其边界，因此图标出现偏离中心。

想知道如何解决这个问题吗？

如何将我在@Input() data（子组件）中收到的对象传递给dataSource，我这样做的方式不允许接收它。我在此链接中留下了我正在做的事情的示例：

  @Input() data:PeriodicElement[];
  dataSource = new MatTableDataSource<PeriodicElement>(this.data);

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  constructor() { }

  ngOnInit() {
    this.dataSource.paginator = this.paginator;

    // console.log(this.dataSource)
  }

我的网页上有一个带有项目列表的标题，每个项目都有一个垫子图标子项。以下是其中一项。

<a [routerLink]="[ '/admin' ]" > 
   <button routerLink="['/admin']" routerLinkActive="active">
       <mat-icon color="warn">history</mat-icon>Audit
   </button>
</a>

CSS 在routerLinkActive="active"按钮文本上工作正常，但我也想更改 mat-icon 的颜色，但似乎没有任何效果

我正在尝试创建一个材质下拉包装器（mat-select dropdown），它将与 formControlName 一起使用。如果某人的库中有 Stackblitz，可以发布他们的 Stackblitz 吗？随意从头开始，并创建自己的答案，只要符合要求即可。

要求：

1）需要与formControlName一起使用。我们有带有 formBuilder 的父组件表单及其验证器，它试图引用这个子包装器。作为典型场景，父组件表单构建器还有许多其他表单字段。

2) 如果数据不满足父 FormBuilder 验证器的要求，则需要显示红色无效错误。

3) a) 不仅需要与 formControlName/patchValue 一起使用（patchValue 应该与整个类一起使用）；b) 如果有人将数据放入 @Input() SelectedValueId Id 数字，也可以选择。可以和两个一起工作

试图让它工作，但还没有成功，有人有任何代码来解决这个问题吗？

需要工作 stackblitz，才能获得成功的答案，

在本例中，Id 是 sourceOfAddressId

export class SourceOfAddressDto implements ISourceOfAddressDto {
    sourceOfAddressId: number | undefined;  // should work with this Id
    sourceOfAddressCode: string | undefined;
    sourceOfAddressDescription: string | undefined;

打字稿：

@Component({
    selector: 'app-address-source-dropdown',
    templateUrl: './address-source-dropdown.component.html',
    styleUrls: ['./address-source-dropdown.component.scss'],
    providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            useExisting: forwardRef(() => AddressSourceDropdownComponent),
            multi: true
        }
    ]
})
export class …

我试图在选项卡（角度材料）内显示图表 js 折线图，但图表未显示，它显示为空。

这是我的代码：

HTML：

 <mat-tab-group animationDuration="0ms">
   <mat-tab label="First">
     <div class="chart-container" style="height:50vh;">
          <canvas id="demo"></canvas>
     </div>
   </mat-tab>
   <mat-tab label="Second">Content 2</mat-tab>
   <mat-tab label="Third">Content 3</mat-tab>
 </mat-tab-group>

js 文件：

  var chartColors = {
    test_1: '#fba66c',
    test_2: '#86b9ce',
    test_3: '#4274fd'
  };

  var canvas : any = document.getElementById("demo");
  var ctx = canvas.getContext("2d");

  var test_1_data = [1, 0, 3, 0, 5, 6, 8];
  var test_2_data = [5, 1, 8, 0, 3, 6, 5];
  var test_3_data = [9, 8, 3, 4, 5, 6, 2];
  var lineChartData = { …