Question

我正在使用Mean Stack和Angular 6来实现一个wep项目。在那里，我必须提交一个带有上载文件的表单。以下是我的html。

<ng-template #content let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">New Map</h4>
  </div>
  <div class="modal-body">
    <form #mapsForm="ngForm" enctype="multipart/form-data">
      <div class="form-group">
        <label for="name">Name</label>
        <div class="input-group">
          <input type="text" id="mapNameId" class="form-control form-control-sm  " name="mapName" [(ngModel)]="currentMapDetails.mapName" name="firstName" >
        </div>
        <br>
        <label for="geoRefMap">Geo- reference Map</label>
        <div class="input-group">
          <input type="file" class="form-control" #fileInput name="milespecMap" ng2FileSelect [uploader]="uploader" (change)="handleFileInput($event.target.files)"
          />
        </div>
        <br>
        <div>
          <button type="submit" (click)="updateInfo()" class="btn btn-sm btn-rectangle btn-default text-case" id="updatebtn">Update</button>
        </div>
        <br>
        <label for="shapeFile">Shape Files</label>
        <div class="boxed">
          <div class="input-group">
            <input id="shapeFile" class="form-control" name="shapeFile">
            <img src="../../../../../assets/images/maps/Browse.png" width="40" height="40" style=" position: absolute; top: 1px; right: 1px"
              (click)="search(); " />
          </div>
        </div>
      </div>
    </form>


  </div>
  <div class="modal-footer">
    <nb-card class="action-buttons">
      <div class="form-input-group">
        <div class="row">
          <div class="">
            <button type='button' (click)="modal.close('Save click')" class="btn btn-sm btn-rectangle btn-default text-case">Save
            </button>
          </div>
          <div class="">
            <button type='button' (click)="modal.cancel('cancel click')" class="btn btn-sm btn-rectangle btn-default text-case">Cancel</button>
          </div>

        </div>
      </div>
    </nb-card>
  </div>
  <br>

</ng-template>

<hr>
<pre>{{closeResult}}</pre>
<nb-card>
  <nb-card-header>
  </nb-card-header>
  <nb-card-body>
    <div>
      <div class="col-lg-3" style="float: left; ">
        <div class="verticalLine">
        </div>
      </div>

      <nb-card class="action-buttons">
        <div class="form-input-group">
          <div class="row">
            <div class="">
              <button type='button' (click)="openModal(content)" class="btn btn-sm btn-rectangle btn-default text-case">Add
              </button>
            </div>
            <div class="">
              <button type='button' (click)="editMap()" class="btn btn-sm btn-rectangle btn-default text-case">Edit</button>
            </div>
            <div class="">
              <button type='button' (click)="deleteMap()" class="btn btn-sm btn-rectangle btn-default text-case">Delete</button>
            </div>
          </div>
        </div>
      </nb-card>

    </div>
  </nb-card-body>
</nb-card>

在map.component.html中有一个“添加”按钮，单击该按钮将打开一个模式。以下是我的内容。

import { Component, OnInit } from '@angular/core';
import { NgbModal, ModalDismissReasons } from '../../../../../../node_modules/@ng-bootstrap/ng-bootstrap';
import { HttpResponse, HttpEventType } from '@angular/common/http';
import { Http } from '../../../../../../node_modules/@angular/http';
import { FileUploader, FileSelectDirective } from 'ng2-file-upload/ng2-file-upload';
import { Map } from './models/map';
import { Router } from '@angular/router';
import { MapsService } from '../../services/maps.service';

const URL = '/mapInfo/uploadMap';
@Component({
  selector: 'maps',
  templateUrl: './maps.component.html',
  styleUrls: ['./maps.component.scss']
})
export class MapsComponent implements OnInit {
  closeResult: string;
  currentMapDetails: Map;
  selectedFile: File = null;

  public uploader: FileUploader = new FileUploader({ url: URL, itemAlias: 'milespecMap', });
  constructor(private modalService: NgbModal,
    private mapsService: MapsService,
    private http: Http,
    private router: Router
  ) { }

  ngOnInit() {
  }
  openModal(content: any) {
    this.modalService.open(content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return `with: ${reason}`;
    }
  }

  handleFileInput(file: FileList) {
    this.selectedFile = file.item(0);
    var reader = new FileReader();

    reader.onload = (event: any) => {
      this.currentMapDetails.milespecUrl = event.target.result;

    }
    reader.readAsDataURL(this.selectedFile);
  }

  updateInfo() {
    this.uploader.uploadAll(); ///image upload
    this.update();
  }

  update() {

    this.mapsService.updateMap(this.currentMapDetails).subscribe(res => {
      this.currentMapDetails;
    }, (err) => {
      console.log(err);
    });
    console.log(this.currentMapDetails);
  }
}

以下是我的地图课程。

export class Map {
  _id: string;
  mapName: string;
  milespecUrl: string;
}

但是当我将地图名称字段与'currentMapDetails'绑定时（例如：[（ngModel）] =“ currentMapDetails.mapName”）。它没有打开我的模态，并给出以下错误。 无法读取未定义的属性“ mapName”

Answer 1

您遇到此undefined错误，因为currentMapDetails在呈现Component时未初始化。您可以做的就是在使用前先放入if条件。一旦currentMapDetails被检索并可用，它将显示mapName。

<div class="input-group" *ngIf="currentMapDetails" >
    <input type="text" id="mapNameId" class="form-control form-control-sm "
       name="mapName" [(ngModel)]="currentMapDetails.mapName" name="firstName" >
</div>

Answer 2

您只需要初始化currentMap Details属性

currentMapDetails: Map = new Map();

在声明currentMapDetails时，您只是设置了它的类型，但仍然具有未定义的值

您必须将类名Map更改为与JavaScript Map相同的其他名称

Answer 3

您刚刚将currentMapDetails声明为Map。尚未未初始化。因此发生错误。由于currentMapDetails本身未定义。因此，您无法访问其属性mapName。

您可以通过在html视图中添加?标记来解决此问题：（注意：这样做只会避免错误）。

[(ngModel)]="currentMapDetails?.mapName"

OR

您必须在ngOnInit()

中对其进行初始化

ngOnInit() { 
    currentMapDetails: Map = new Map();
}

希望这会有所帮助。

Angular6错误-无法读取未定义的属性'mapName'

3 个答案: