代码之家 › 专栏 › 技术社区 › Jonathan

在角度8组件中切换MatslideToggle

angular8 angular-material typescript angular

Jonathan · 技术社区 · 5 年前

我一直有这个错误:

“错误类型错误:无法设置未定义的”“checked”“属性”

这是我的密码 测试组件 :

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSlideToggle } from '@angular/material/slide-toggle';

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

  @ViewChild('testSlider', { static: false }) t: MatSlideToggle;

  constructor() { }

  ngOnInit() {
    this.t.checked = true;
  }

}

和 test.component.html测试组件

<mat-slide-toggle #testSlider>Test</mat-slide-toggle>

我做错什么了?这似乎很简单。

1 回复 | 直到 5 年前

Constantin Beer SDC 5 年前

你的 @ViewChild 如果尝试在上访问它,则未定义 ngOnInit . 试试这个:

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSlideToggle } from '@angular/material/slide-toggle';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent implements AfterViewInit {

  @ViewChild('testSlider', { static: false }) t: MatSlideToggle;

  constructor(private changeDetectorRef:ChangeDetectorRef) { }

  ngAfterViewInit() {
    this.t.checked = true;
    this.changeDetectorRef.detectChanges();
  }

}

推荐文章

user19531657 · 如何将标题和按钮对齐在同一行?

2 年前

Marcus Edensky · 角度6材质:材质选项卡链接由下划线栏选择

6 年前

Carl.G · 如何将Angular 6 Material sidenav设置为从屏幕右侧从右向左打开

6 年前

spottedmahn · 覆盖只读/禁用样式/CSS

6 年前

bereket gebredingle · 具有列值的物料表数据源筛选器

6 年前

Rahul Munjal · 无法绑定到“dataSource”,因为它不是“table”的已知属性

6 年前

Billy G · “角度材质”对话框:如何在父零部件中更改注入的数据时更新这些数据?

6 年前

Kaushik Nath · 导入MatTabChangeEvent时出错

6 年前

The Fox · “角度材质”对话框:复选框始终返回false

6 年前

Chinaedu Onwukwe · 在鼠标上方展开“材质扩展”面板

6 年前