Question

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

因此，在页面加载时，如果没有来自firebase的下载网址，则应返回图像位置以使用默认按钮图像。如果Firebase中有用于photo0的图像，则应使用该网址。每当用户上传或删除图片时，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

3 个答案: