angular - 离子无线电组错误：没有未指定名称属性的表单控件的值访问器

Question

我正在将 Ionic 移至 Ionic 4，但在 Firebase 数据库集成方面遇到了问题。

问题：每次我尝试将新信息推送到用户 uid 下的 Firebase 数据库时，我都会得到

ERROR 错误：没有用于具有未指定名称属性的表单控件的值访问器

我的html代码：

<ion-content no-bounce padding id="master">
    <div class="list">
      <ion-item>
        <ion-input class="title" type="text" placeholder="Add your title here" [(ngModel)]="list.name"></ion-input>
      </ion-item>
      
        <ion-list no-lines [(ngModel)]="list.color">
          <ion-radio-group>
          <p class="radio-label">Pick your list colour</p>
            <ion-item>
              <ion-label class="labelC">Light Coral</ion-label>
              <ion-radio class="radioC" slot="start" value="#f55f7c"></ion-radio>
            </ion-item>
            <ion-item>
              <ion-label class="labelY">Sandy Brown</ion-label>
              <ion-radio class="radioY" slot="start" value="#ffcb53"></ion-radio>
            </ion-item>
            <ion-item>
              <ion-label class="labelB">Aquamarine</ion-label>
              <ion-radio class="radioB" slot="start" value="#85dec8">Aquamarine</ion-radio>
            </ion-item>
          </ion-radio-group>
          </ion-list>
    </div>
    
    <div class="button"><ion-button (click)="createNewList1(list)">ADD LIST</ion-button></div>
</ion-content>

这是ts：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

// Firebase imports
import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';
import * as firebase from 'firebase';

// Model import
import { List } from '../models/list.interface';

@Component({
  selector: 'app-add-list',
  templateUrl: './add-list.page.html',
  styleUrls: ['./add-list.page.scss'],
})
export class AddListPage implements OnInit {

  list = {} as List;
  newListRef$: AngularFireList<List>;
  listId: any;
  userId: any;

  constructor(
    public router: Router,
    private db: AngularFireDatabase,
    private afAuth: AngularFireAuth) {
  }

  ngOnInit() {
    this.userId = firebase.auth().currentUser.uid;
    this.newListRef$ = this.db.list(this.userId + '/lists');
  }

  createNewList1(list: List) {
    this.newListRef$.push({
      name: this.list.name,
      color: this.list.color
    });
    this.router.navigateByUrl('main/' + this.userId);
  }
}

我还提到了 Ionic 设置的新离子按钮规则。

但我不断收到错误...

（在我开始将其移至 Ionic 4 之前，此代码运行完美且没有错误）

编辑：我认为这与无法从 Radio-Group 读取 list.color 的值有关。我收到点击错误

ERROR 错误：Reference.push 失败：第一个参数在属性“WCoOMVhPUZOVPFFhmTpSul2Mtxr1.lists.color”中包含未定义

其中'WCoOMVh ...'是用户uid和'lists'，我假设是我指向的节点。

标签： angulartypescriptfirebaseionic-frameworkionic4