Angular 10/Ionic 5 - 将输入数据从模态传递到父组件，然后提交到 firebase 数据库

Question

This is a follow-up to a question I recently asked regarding passing input data from an ionic modal. I resolved the first error, but the second error is fairing harder for me to understand.

I am trying to make a new instance of a workspace. This is done with ngFor , from a workspace in a firebase database. There are two pages: the workspace page, and the workspace modal page, the former being the parent.

When a button is pressed, the modal prompts the user to enter a title for the new workspace (there are other fields as well, but I am just trying to get the first one to work). That data is then passed back to the home component, where a function calls a custom service method that sends it to the firebase backend.

Here is the HTML and TS for the parent component:

<div class="workspaceGrid" style="padding-right: 30px;">
  <!-- [workspace]="workspace" passes the data down to the child component via an input property *ngFor="let workspace of workspaces" -->
  <app-workspace
    *ngFor="let workspace of workspaces"
    [workspace]="workspace"
  ></app-workspace>
  <ion-button (click)="openWorkspaceModal()">
    Open Modal
  </ion-button>
</div>

import { Component, OnInit, OnDestroy } from "@angular/core";
import { Workspace } from "../models/workspace.model";
import { Subscription } from "rxjs";
import { WorkspaceService } from "src/app/services/workspace.service";
// ADD THE MODAL
import { ModalController } from "@ionic/angular";
import { WorkspaceModalComponent } from "../modals/workspace-modal.component";

@Component({
  selector: "app-workspaces",
  templateUrl: "./workspaces.component.html",
  styleUrls: ["./workspaces.component.scss"],
})
export class WorkspacesComponent implements OnInit, OnDestroy {
  // HANDLE WORKSPACE SUBSCRIPTION
  workspaces: Workspace[];
  sub: Subscription;

  constructor(
    public workspaceService: WorkspaceService,
    public modalController: ModalController
  ) {}

  // GET ALL WORKSPACES AND POPULATE THE WORKSPACES ARRAY
  ngOnInit() {
    this.sub = this.workspaceService
      .getUserWorkspaces()
      .subscribe((workspaces) => {
        this.workspaces = workspaces;
      });
  }

  /**
   * PRESENT THE MODAL FOR CREATING A NEW WORKSPACE
   * RETURN OF AN ASYNC FUNCTION HAS TO BE A PROMISE
   */
  async openWorkspaceModal() {
    const workspaceListModal = await this.modalController.create({
      component: WorkspaceModalComponent,
      // because this is a new workspace, there is no data being passed to the modal component
      componentProps: {},
    });
    workspaceListModal.onDidDismiss().then((result) => {
      if (result) {
        this.workspaceService.createWorkspace({
          title: result,
        });
      }
    });
    return await workspaceListModal.present();
  }

  // NAVIGATE AWAY FROM THE PAGE, WE CAN UNSUBSCRIBE FROM THE WORKSPACES OBSERVABLE
  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Here is the HTML and the TS for the modal:

<ion-header color="primary" mode="ios">
  <ion-toolbar>
    <ion-title>New Workspace</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="closeWorkspaceModal()">
        <ion-icon slot="icon-only" name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-item>
    <ion-input
      placeholder="Enter a title for the workspace"
      [(ngModel)]="data.title"
    >
    </ion-input>
  </ion-item>
  <!-- HANDLE SUBMISSION OF THE CONTENT -->
  <ion-button [data]="data.title" (click)="closeWorkspaceModal()"
    >Create Workspace</ion-button
  >
</ion-content>

import { Component, Inject } from "@angular/core";
import { ModalController } from "@ionic/angular";
import { WorkspacesComponent } from "../workspaces/workspaces.component";
import { Workspace } from "../models/workspace.model";

@Component({
  selector: "app-workspace-modal",
  templateUrl: "./workspace-modal.component.html",
  styles: [],
})
export class WorkspaceModalComponent {
  public data: Workspace = {
    title: "",
    description: "",
  };

  constructor(public modalController: ModalController) {}

  /**
   * CLOSE THE MODAL ON CLICK
   */
  async closeWorkspaceModal() {
    await this.modalController.dismiss();
  }
}

Here is the interface TS, followed by the function in the service in the backend that creates a new workspace:

export interface Workspace {
  id?: any;
  title?: string;
  description?: string;
  color?: "blue" | "red" | "yellow";
  priority?: number;
}

import { Injectable } from "@angular/core";
import { AngularFireAuth } from "@angular/fire/auth";
import { AngularFirestore } from "@angular/fire/firestore";
import * as firebase from "firebase/app";
import { switchMap, map } from "rxjs/operators";
import { Workspace } from "../home/models/workspace.model";

@Injectable({
  providedIn: "root",
})
export class WorkspaceService {
  constructor(private afAuth: AngularFireAuth, private db: AngularFirestore) {}

  /**
   *
   * @param data
   * CREATES A WORKSPACE IN THE DATABASE BASED ON THE CURRENTLY LOGGED IN USER
   */
  async createWorkspace(data: Workspace) {
    const user = await this.afAuth.currentUser;
    return this.db.collection("workspaces").add({
      ...data,
      // automatically sets the UID property of the workspace here
      uid: user.uid,
    });
  }
}

Here is the error that the console is giving me:

ERROR Error: Uncaught (in promise): FirebaseError: [code=invalid-argument]: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field title.data)
FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field title.data)
    at new n (index.cjs.js:160)
    at t.Tc (index.cjs.js:9425)
    at index.cjs.js:9624
    at zr (index.cjs.js:9625)
    at index.cjs.js:9634
    at I (index.cjs.js:548)
    at Gr (index.cjs.js:9633)
    at zr (index.cjs.js:9535)
    at index.cjs.js:9634
    at I (index.cjs.js:548)
    at resolvePromise (zone-evergreen.js:798)
    at zone-evergreen.js:705
    at fulfilled (tslib.es6.js:71)
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Object.onInvoke (core.js:41654)
    at ZoneDelegate.invoke (zone-evergreen.js:363)
    at Zone.run (zone-evergreen.js:123)
    at zone-evergreen.js:857
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41632)

My grasp on promises is growing, but they are not mature enough to debug what is happening here. I feel it has something to do with the interface being passed through everything. The only reason I have it initiated in the modal ts is that angular got upset, saying that data.title was undefined, so I set it to "" right away. I thought passing an empty componentProps object would be enough, but apparently not.

Thank you so much for any help!

*** there is some code that is commented out that is not used.

Answer 1

If you log what data is that you pass to createWorkspace , I'm willing to bet it's undefined. You aren't returning anything from your modal in its dismiss.

See the docs for ion-modal : https://ionicframework.com/docs/api/modal#dismissing-a-modal

Your closeWorkspaceModal method should pass this.data to the modal dismiss.

async closeWorkspaceModal() {
    await this.modalController.dismiss(this.data);
  }

Answer 2

I think the issue is that the shape of the data received by you from your modal via onDidDismiss here:

    workspaceListModal.onDidDismiss().then((result) => {
      if (result) {
        this.workspaceService.createWorkspace({
          title: result,
        });
      }
    });

Results in malformed Workspace object:

{
     title: {
         data: undefined
         role: undefined
     }
}

Which you are trying to pass to Firestore (hence error related to title.data being undefined since inside you dismissed the modal with no arguments).

To fix this you need to make sure what modal dismisses and what then gets formed inside onDidDismiss method is a valid Workspace shape object:

First, Inside you WorkspaceModalComponent make sure you dismiss (close) modal including your data object:

  async closeWorkspaceModal() {
    await this.modalController.dismiss(this.data);
  }

Now inside the onDidDismiss method the 'result' will be of shape:

{
    data: this.data, // which is your data object
    role: undefined
}

So you need to ensure you do:

workspaceListModal.onDidDismiss().then((result) => {
  if (result && result.data) {
    this.workspaceService.createWorkspace(result.data);
  }
});

If you console.log(result.data) it should be of valid Workspace shape now and error should be resolved.