mat-select с триггером mat-select не отвечает в приложении Angular / AngularJS с пониженным качеством

Question

У меня есть гибридное приложение Angular / AngularJS, в котором на стороне AngularJS я поднимаю модальное окно с помощью службы в приложении Angular, содержащей компонент Angular , Все хорошо, модал поднят, компонент показан, однако у компонента есть mat-select, который содержит mat-select-trigger a mat-chip-list, а опции создаются с использованием ngFor. Это работает, но иногда, когда я нажимаю на кнопку выбора, это не отвечает, иногда это идеально. В сценарии ios выбирается выбор, но параметры не отображаются, ничего не происходит, пока я не нажму или не укажу интерфейс.

Это мой шаблон кода:

<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-trigger, я еще не пробовал этого, поскольку знаю, что не могу добавить событие щелчка к mat-select-trigger, я буду попробуйте mat-select, но если кто-то уже сталкивался с таким типом поведения раньше и имеет представление о том, как решить эту проблему, я буду очень признателен.