typescript (未捕获范围错误:超出最大调用堆栈大小)Ionic Angular:模态是解散整个模态和页面

wkyowqbh  于 2023-05-01  发布在  TypeScript
关注(0)|答案(1)|浏览(92)

我有一个完整的页面组件来添加新用户到我的应用程序中,所以为了做到这一点,我决定使用一个模态来注册。但是我必须在这个组件中执行两个调用:1-在Firebase上注册,2-在DB上注册。正因为如此,我的模态关闭,页面也返回到最后一页,并在日志上发送此错误。
有人能帮我吗?

**register.page.简体中文

<ion-content>
<ion-fab (click)="setOpen('isModalOpen', true)" vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button id="user-modal">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

  <ion-modal trigger="user-modal">
    <ng-template>
    <ion-header>
        <ion-toolbar>
          <ion-buttons slot="start">
            <ion-button (click)="cancel()">
              <ion-icon name="arrow-back-outline"></ion-icon>
            </ion-button>
          </ion-buttons>
          <ion-title>Create User</ion-title>
        </ion-toolbar>
      </ion-header>
        <ion-content>
            <ion-item class="new-user">
                <ion-label position="floating">Email:</ion-label>
                <ion-input type="email" [(ngModel)]="email"></ion-input>
            </ion-item>
            <ion-button (click)="sendUser()">Cadastrar</ion-button>
        </ion-content>
    </ng-template>
  </ion-modal>
</ion-content>

register.page.ts

@Component({
  selector: 'register-admin',
  templateUrl: './register-admin.page.html',
  styleUrls: ['./register-admin.page.scss'],
})
export class RegisterPage implements OnInit {

  @ViewChild(IonModal) modal: IonModal;

    constructor(private userService: UserService) {}

    sendUser() {
      this.userService.createUser(user)
        .then(() => {
            this.userService.createUserInfo(user)
                .then(() => {
                    alert('User created!');
                    this.modal.dismiss(null, 'cancel');
                });
          }).catch(err => {
           if (err.message.includes('already')) {
             alert('Already Created');
           } else if (err.message.includes('Password')) {
             alert('Password have to be more than 6 digits.');
           } else {
             alert('Try again Later');
           }
         });
      
}

user.service.ts

createUser(user) {
    return this.fireAuth.createUserWithEmailAndPassword(user.email, user.pass)      
 }

 resetPassword(email: string) {
    return this.fireAuth.sendPasswordResetEmail(email);
 }

 createUserInfo(user: any) {
    return this.db.list('/user').push({
        name: user.name,
        email: user.email,
        admin: user.admin === 'true' ? true : false,
        type: user.type
    });
}

但每次我调用这个函数时,它工作,但所有关闭,或者最糟糕的是,它不关闭,整个屏幕被冻结,并在控制台上显示错误:

Uncaught RangeError: Maximum call stack size exceeded.
    at focusElement (helpers-eed79a2b.js:158:1)
    at focusFirstDescendant (overlays-4fbe89bd.js:4095:17)
    at trapShadowFocus (overlays-4fbe89bd.js:4235:7)
    at trapKeyboardFocus (overlays-4fbe89bd.js:4252:5)
    at HTMLDocument.<anonymous> (overlays-4fbe89bd.js:4261:41)
    at ZoneDelegate.invokeTask (zone.js:434:1)
    at Zone.runTask (zone.js:205:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:516:1)
    at invokeTask (zone.js:1656:1)
    at HTMLDocument.globalZoneAwareCaptureCallback (zone.js:1725:1)

PS:错误也可以来自focusLastDescendant
我试着看看是否是模态焦点的问题,在关闭时有这种错误。但每次都能正常工作。然后,如果我在调用中只使用1个promise,它的工作完全正常。我不知道这个项目的其余部分是否会影响这个组件。..但似乎不是,因为我有另一个页面几乎相同的方式,但工程完全正常,但只有1承诺调用

dffbzjpn

dffbzjpn1#

所以...问题是,当我获取所有用户时,我使用snapshotChanges(),这是调用该路线上的每一个更改。我第一次打电话的时候是用navCtrl前进的,所以这一切都是错误的。所以我改为valueChange(),并且似乎可以工作

相关问题