从Firestore数据创建单选按钮警报

Question

我想使用fireStore中的数据创建一个单选按钮警报。我通过valueChanges（）生成了一个可观察值，但是当我在无法读取数据并最终无法插入单选按钮的值的函数中使用console.log时，它返回Undefined。我是fireStore和ionic的新手。

我也尝试过使用.get（）。then（function（doc），但返回的错误不是函数。我也尝试过使用subscription（）但也无法提供实际数据，或者我错过了。我在Google住了很多天，但找不到解决方案。希望有人能帮忙。

myMemberList = [];

constructor(public navCtrl: NavController, 
       public alertCtrl: AlertController,
       public firestore: AngularFirestore, 
       public afAuth: AngularFireAuth,
    ) { }

ionViewDidEnter() {
  this.afAuth.authState.subscribe(user => {
     if (user) {
      this.userId = user.uid;
      this.fireStoreTaskList = this.firestore.doc<any>('users/' + 
      this.userId).collection('Member').valueChanges();
     }
  });
}

// create the inputs for radio button //
createInputs() {
    const theNewInputs = [];
 for (let i = 0; i < this.fireStoreTaskList.length; i++) { // undefined
    theNewInputs.push(
      {
        type: 'radio',
        label: this.fireStoreTaskList.memberName,     // undefined
        value: this.fireStoreTaskList.memberId,       // undefined
        checked: false      
      }
    );

  } {
  console.log(theNewInputs);
  }
  return theNewBeneInputs;
}

// Radio button alert to choose data //
async selectMember() {
  this.myMemberList = this.createInputs();
  const alert = await this.alertCtrl.create({
    header: 'Member',
    inputs: this.myMemberList,

    buttons: [{ text: 'Cancel', role: 'cancel' },
              { text: 'OK',
                 handler: data => {
                 console.log(data)
                }
              }
              ]
  });
  await alert.present();
}

Answer 1

我已经使用Ionic 4已有一段时间了，并且还将Firebase Firestore集成到了我的应用程序中。我不太了解整个说明，但是我为您提供了一个解决方案，最初的问题“我想通过使用Firestore中的数据来创建单选按钮警报”

我假设您已经使用Firebase应用程序设置了应用程序，如果没有，我建议您遵循How to Build An Ionic 4 App with Firebase and AngularFire 5。

我的示例有1个按钮，只要您单击它，它就会执行以下操作：

1. 访问Firestore数据库。
2. 下载Firestore文档。
3. 获取每个文档的字段 memberName 。
4. 将这些名称添加到名称数组中
5. 创建单选按钮警报。
6. 对于单选按钮，它将创建一个单选按钮列表，其中将包含成员的名称。
7. 显示数组。

为了使我的代码正常工作，这是我遵循的Firestore数据库结构：

.
└── collection: "users"
    └── document: "autogenerated_id"
    |   ├── memberID: "user_id"
    |   └── memberName: "Name 01"
    └── document: "autogenerated_id"
        ├── memberID: "user_id"
        └── memberName: "Name 02"

点击按钮时，您会看到带有单选按钮的警报，例如名称01 和名称02

如上所述，this is my example code。如您在问题中所述，它会从Firestore加载数据，并使用该数据使用单选按钮创建警报。我在代码中为您添加了很多注释。如果这不是您想要的，请查看代码并根据需要进行修改。

Answer 2

已更新代码，用于将memberID和memberName加载到接口类型的数组中。

UINavigationController