ngControl 的未指定名称属性的表单控件没有值访问器

Question

我正在创建一个 Ionic 社交应用程序。您将图片上传到 firebase 后端。转到个人资料页面时，我收到以下错误消息：没有具有未指定名称属性的表单控件的值访问器。

因此，当页面加载时，如果没有从 firebase 下载 url，它应该 return 使用默认按钮图像的图像位置。如果 firebase 中有 photo0 的图像，那么它应该使用那个 url。 NGModel 应该在用户上传或删除图片时动态更改。但是当我加载该页面时，我得到了无值访问器错误。不确定我在这里做错了什么。

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/user/auth.service';
import { ImageService } from '../../services/image.service';
import { Router } from '@angular/router';
import * as firebase from 'firebase/app';
import { AngularFireAuth } from 'angularfire2/auth';

    public photo0: string;

  
    constructor(private router: Router,
              private authService: AuthService,
              private imageService: ImageService,
              private afAuth: AngularFireAuth) {

      this.afAuth.authState.subscribe(user => {
      this.userId = user.uid
      console.log('constructoruser', this.userId);
      });
              }
  
  ngOnInit() {
          this.firestore.ref(`/Photos/${ this.userId }/`).child('photo0').getDownloadURL().then((url) => {
          this.photo0 = url;
        }).catch((error) => {
          console.log(error.message);
          this.photo0 = 'assets/img/add-an-image.png';
          console.log(this.photo0);
        });
  }

            <div>
                <div [(ngModel)]="photo0">
                    <img src="photo0" (click)="UploadPic0('photo0')"/>
                </div>      
            </div>

Answer 1

你可以试试：

    <div>
        <div *ngIf="photo0 != ''">
            <img [src]="photo0" (click)="UploadPic0('photo0')"/>
        </div>      
    </div>

Answer 2

标签 "src" 必须接收组件值。您可以在 img 标签内使用 [src]="photo0" 或 src="{{photo0}}"。

Answer 3

通过删除 ngModule 并仅使用以下内容消除了错误：

            <div>
                <img [src]="photo0" (click)="UploadPic0('photo0')"/>
            </div>

ngControl 的未指定名称属性的表单控件没有值访问器

No value accessor for form control with unspecified name attribute for ngControl

firebase

angularfire2

angular

ionic4