0

我有一个混合 Angular / AngularJS 应用程序，其中在 AngularJS 端我使用包含 Angular 组件的 Angular 应用程序中的服务来引发模式窗口。一切都很好，模态被提升，显示的组件但是组件具有mat-select包含 a 的mat-select-triggeramat-chip-list并且使用 a 生成选项ngFor。它可以工作，但有时当我单击选择时它没有响应，有时它是完美的。在这种情况下，单击选择但未显示选项，直到我单击或选项卡界面时才会发生任何事情。

这是我的模板代码：

<mat-select formControlName="companies" multiple class="add-user__form__chip-select">
    <mat-select-trigger>
        <mat-chip-list>
            <mat-chip *ngFor="let company of outputChips('companies')"
                  [removable]="true"
                  (removed)="onChipRemove('companies', company)">
                {{ company.displayName }}
                <mat-icon matChipRemove>cancel</mat-icon>
            </mat-chip>
        </mat-chip-list>
    </mat-select-trigger>
    <mat-option *ngFor="let company of companyList" [value]="company">{{company.displayName}}</mat-option>
</mat-select>

这是我的代码文件（打字稿），我没有添加所有代码，因为有些方法不相关。

export class AddAccountComponent implements OnInit {
  @ViewChild('stepper') private stepper: MatStepper;
  addAccountForm: FormGroup;
  companyList: any[] = [];
  roles: any;
  userCreated = false;
  creationError = false;

  constructor(@Inject(MAT_DIALOG_DATA) private data,
              public dialogRef: MatDialogRef<AddAccountComponent>,
              private zone: NgZone,
              private apiService: ApiService,
              private i18Next: I18NextPipe,
              private emailUniqueValidator: EmailUniqueValidator
  ) { }

  ngOnInit(): void {
    this.addAccountForm = this.createAddUserForm();
    this.loadCompanies();
  }

  createAddUserForm(): FormGroup {
    return new FormGroup({
      name: new FormControl('', [Validators.required]),
      email: new FormControl(
        '',
        [Validators.required, Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$')],
        this.emailUniqueValidator.validate.bind(this)
        ),
      companies: new FormControl(),
      roles: new FormArray([])
    });
  }

  loadCompanies(): void {
    this.apiService.getTags('company', '').subscribe(tags => this.companyList = tags.slice(0, 20));
  }

  outputChips(control): any {
    return this.addAccountForm.controls[control].value;
  }

  onChipRemove(control: string, value: any): void {
    const index = this.addAccountForm.controls[control].value.findIndex(item => item.id === value.id);
    this.addAccountForm.controls[control].value.splice(index, 1);
    this.addAccountForm.controls[control].setValue(this.addAccountForm.controls[control].value);
  }

起初我认为 API 返回的公司数量可能是问题，但我在调试时将其减少到只有 20 个结果。混合应用程序中的更改检测一定有问题。有没有人经历过这样的行为？我想可能会在单击 mat-select 或单击时触发更改检测mat-select-trigger，但我还没有尝试过，因为我知道我无法将单击事件添加到mat-select-trigger，我将尝试使用mat-select但是如果有人以前经历过这种行为，并且对如何解决这个问题有一些想法，我将不胜感激。

4

0 回答 0