Я реализую проект wep, используя Mean Stack с Angular 6. Здесь я должен отправить форму с загруженным файлом. Ниже мой 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, и щелчок по этой кнопке открывает модальное окно. Следующее - мой ts.
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.info(err);
});
console.info(this.currentMapDetails);
}
}
Ниже приведен мой класс карты.
export class Map {
_id: string;
mapName: string;
milespecUrl: string;
}
Но когда я привязываю поле имени карты к 'currentMapDetails' (например: [(ngModel)] = "currentMapDetails.mapName"). Он не открывает мое модальное окно и дает следующую ошибку. Невозможно прочитать свойство mapName из undefined
You are encountered with this
undefined
error sincecurrentMapDetails
is not initialized when theComponent
was rendered. What you can do is just put one if condition before you use it. It will display the mapName once thecurrentMapDetails
is retrieved and available.
<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>
Вам просто нужно инициализировать свойство currentMap Details
currentMapDetails: Map = new Map();
когда вы объявляете currentMapDetails, вы только что установили его тип, но все еще имеете значение undefined
you have to change the class name
Map
to something else it 's will have conflect with javascriptMap
Вы только что объявили currentMapDetails
как Map
. Это еще не инициализирован. Следовательно, возникает ошибка. Поскольку сам currentMapDetails
не определен. Таким образом, вы не можете получить доступ к его собственности mapName
.
Вы можете решить эту проблему, добавив метку ?
в html-представление: (Примечание: это просто позволит избежать ошибки).
[(ngModel)] = "currentMapDetails?.mapName"
ИЛИ
Вы должны инициализировать его в ngOnInit()
,
ngOnInit() {
currentMapDetails: Map = new Map();
}
Надеюсь это поможет.,
currentMapDetails: Map = {} ;