Question

我有一个angular-cli组件，其中包含多个mat-expansion-panel（https://material.angular.io/components/expansion/overview）。

我需要从ts文件打开/关闭扩展面板，我不确定如何访问单个扩展面板上的属性。我遇到了错误

ERROR TypeError: Cannot read property 'open' of undefined

我正在尝试访问此元素

<mat-expansion-panel #first="matExpansionPanel">

使用

first: MatExpansionPanel;
...
this.first.open();

这是我的ts

import { Component, OnInit } from '@angular/core';
import { Category } from '@app/model/Enums';
import { ActivatedRoute } from '@angular/router';    
import { MatExpansionPanel } from '@angular/material';

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

export class SomeComponent implements OnInit {

  sub: any;
  first: MatExpansionPanel; 
  second: MatExpansionPanel; 

  constructor(private activateRoute: ActivatedRoute) {
    this.sub = this.activateRoute.params.subscribe(params => {

      // Open the MatExpansionPanel with id "first"
      this.first.open();

      // Open the MatExpansionPanel with id "second"
      this.second.open();
  }

  ngOnInit() {
  }

}

这是我的HTML

<mat-accordion>
    <mat-expansion-panel #first="matExpansionPanel">
        <mat-expansion-panel-header>
            <mat-panel-title>
                Title 1
            </mat-panel-title>
            <mat-panel-description>
            </mat-panel-description>
        </mat-expansion-panel-header>
        <p>Content</p>
    </mat-expansion-panel>
</mat-accordion>
<br />
<mat-accordion>
    <mat-expansion-panel #second="matExpansionPanel">
        <mat-expansion-panel-header>
            <mat-panel-title>
                Title 2
            </mat-panel-title>
            <mat-panel-description>
            </mat-panel-description>
        </mat-expansion-panel-header>
        <p>Content</p>
    </mat-expansion-panel>
</mat-accordion>

关于如何执行此操作的任何想法？

Answer 1

首先，您必须使用private static List<AclEntry> get600ACL(FileSystem fileSystem) throws IOException { List<AclEntry> aclEntryList = new ArrayList<AclEntry>(); AclEntry.Builder acl3 = AclEntry.newBuilder(); acl3.setPermissions(EnumSet.of( AclEntryPermission.READ_DATA, AclEntryPermission.WRITE_DATA, AclEntryPermission.WRITE_ATTRIBUTES, AclEntryPermission.SYNCHRONIZE, AclEntryPermission.READ_ACL, AclEntryPermission.READ_ATTRIBUTES, AclEntryPermission.READ_NAMED_ATTRS, AclEntryPermission.DELETE, AclEntryPermission.WRITE_NAMED_ATTRS, AclEntryPermission.APPEND_DATA, AclEntryPermission.EXECUTE, AclEntryPermission.DELETE, AclEntryPermission.DELETE_CHILD, AclEntryPermission.ADD_FILE, AclEntryPermission.ADD_SUBDIRECTORY, AclEntryPermission.LIST_DIRECTORY, AclEntryPermission.WRITE_ACL, AclEntryPermission.WRITE_ATTRIBUTES, AclEntryPermission.WRITE_DATA, AclEntryPermission.WRITE_OWNER )); GroupPrincipal grp2 = fileSystem.getUserPrincipalLookupService().lookupPrincipalByGroupName("Administrators"); acl3.setPrincipal(grp2); acl3.setType(AclEntryType.ALLOW); AclEntry entry3 = acl3.build(); aclEntryList.add(entry3); return aclEntryList; }实例化扩展面板。

@ViewChild

然后，如果要执行“打开”功能，则只能在@ViewChild('first', {static: true, read: MatExpansionPanel}) first: MatExpansionPanel;功能中设置页面之后才能执行此操作。

ngAfterViewInit

angular-cli：从ts文件打开/关闭MatExpansionPanel

1 个答案: