Question

我的角度应用程序中有2个mat-select标签。一种是选择域名，另一种是选择公司。域的结构是

export class Domain {
    domainname : string;
}

公司的结构是

export class Company {
    companyname : string;
    domains : Domain[];
}

每家公司都可以在一个或多个域中运营。目前，我已将所有公司和域存储为打字稿文件中的常量，并具有写入服务以获取它们。

最初加载视图时，我希望禁用公司选择标记。仅当从域选择标记中选择域时，才应启用公司选择标记并使用在该域中运行的公司填充该标记。每当我在域选择标记中更改我的选择时，它应该自动与在该域中操作的相应公司重新填充选项。我目前面临2个问题

我曾尝试使用过滤功能通过域值获取公司，但似乎无法正确使用（我对Javascript / Typescript完全不熟悉）。以下是我公司服务的代码（CompanyList是const'Company'数组）

@Injectable()
export class CompanyService {

  constructor() { }

  getAllCompanies() : Company[] {
    return CompanyList;
  }
  
  getCompaniesByDomain(dom : string) : Company[] {
    return CompanyList.filter((company)=> {company.domains.find(dom)});
  }
  
}

我在公司选择时添加的ng-disabled标签给了我错误。我尝试了它的多种变体，但它们似乎都没有效果。这是我的打字稿＆amp; HTML代码：

export class DashHeaderComponent implements OnInit {

  domainList : Domain[];

  companyList : Company[];

  selecteddomain : string;

  constructor(private domainService : DomainService, private companyService : CompanyService) { }

  ngOnInit() {
    this.domainList = this.domainService.getDomainList();
    this.companyList = this.companyService.getCompaniesByDomain(selecteddomain);
    this.selecteddomain = "";
  }

  onDomainSelect(){
    //
  }

}

<nav class="navbar navbar-expand-sm navbar-dark navbar-custom" >   
	<a class="navbar-brand" href="#">Logo</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01"
    aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>           
  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <span class="flex-spacer"></span>       
    <mat-form-field class="select-space">
      <label for="domain-select">Select Domain</label>   
      <mat-select id="domain-select" [(ngModel)]="selecteddomain" ng-change="onDomainSelect()">                
        <mat-option *ngFor="let domain of domainList" [value]="domain.domainname">{{domain.domainname}}</mat-option>
      </mat-select>    
    </mat-form-field>      
    <mat-form-field class="select-space">
      <label for="company-select">Compare</label>  
      <mat-select multiple id="company-select" ng-disabled="selecteddomain === """>
        <mat-option *ngFor="let company of companyList" [value]="company.companyname">{{company.companyname}}</mat-option>
      </mat-select>
    </mat-form-field>
  </div>       
</nav>

代码目前尚未完成，但我想知道在上述两种情况下我做错了什么？ TIA

动态地启用/禁用和填充选项以在角度5中进行选择

0 个答案: