我是Angular 8的新手,想知道为什么我会收到此错误,如果您看到编写以下代码的更好方法,请随时给我提示。
“数据”类型缺少“纪录片”类型中的以下属性:id,>标题,子弹,故事情节以及另外13个。
该错误位于 AdminDocumentaryEditComponent
中 ngOnInit() {
this.route.data.subscribe(data => {
this.documentary = data; //here
console.log(this.documentary);
this.initForm();
})
}
DataService
import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private url: string, private http: HttpClient) { }
get(slug) {
return this.http.get(this.url + '/' + slug);
}
getAll(params:HttpParams) {
return this.http.get<Object[]>(this.url,
{
params: params
});
}
create(resource) {
return this.http.post(this.url, JSON.stringify(resource));
}
update(resource) {
return this.http.put(this.url + '/' + resource.id, JSON.stringify({
}));
}
delete(id: number) {
return this.http.delete(this.url + '/' + id);
}
}
DocumentaryService
import { HttpClient } from '@angular/common/http';
import { DataService } from './data.service';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class DocumentaryService extends DataService {
constructor(http: HttpClient) {
super('http://localhost:8000/api/v1/documentary', http);
}
}
DocumentaryResolverService
import { Documentary } from './../models/documentary.model';
import { DocumentaryService } from './documentary.service';
import { Injectable } from '@angular/core';
import {
Resolve,
ActivatedRouteSnapshot,
RouterStateSnapshot
} from '@angular/router';
@Injectable({ providedIn: 'root' })
export class DocumentaryResolverService implements Resolve<Documentary> {
constructor(private documentaryService: DocumentaryService) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
let slug = route.params['slug'];
let documentary = this.documentaryService.get(slug)[0];
return Object.assign(new Documentary(), documentary);
}
}
AdminDocumentaryEditComponent
import { Documentary } from './../../../models/documentary.model';
import { DocumentaryService } from './../../../services/documentary.service';
import { Params, ActivatedRoute, Router } from '@angular/router';
import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
import { AngularEditorConfig } from '@kolkov/angular-editor';
@Component({
selector: 'app-admin-documentary-edit',
templateUrl: './admin-documentary-edit.component.html',
styleUrls: ['./admin-documentary-edit.component.css']
})
export class AdminDocumentaryEditComponent implements OnInit {
documentary: Documentary;
editDocumentaryForm: FormGroup;
constructor(
private route: ActivatedRoute,
private documentaryService: DocumentaryService,
private router: Router,
private cd: ChangeDetectorRef) {}
editorConfig: AngularEditorConfig = {
editable: true,
spellcheck: true,
height: '25rem',
minHeight: '5rem',
placeholder: 'Enter text here...',
translate: 'no',
uploadUrl: 'v1/images', // if needed
};
ngOnInit() {
this.route.data.subscribe(data => {
this.documentary = data;
console.log(this.documentary);
this.initForm();
})
}
initForm() {
let title = this.documentary.title;
let slug = this.documentary.slug;
let storyline = this.documentary.storyline;
let summary = this.documentary.summary;
let year = this.documentary.year;
let length = this.documentary.length;
let status = this.documentary.status;
let short_url = this.documentary.short_url;
let poster = this.documentary.poster;
this.editDocumentaryForm = new FormGroup({
'title': new FormControl(title, [Validators.required]),
'slug': new FormControl(slug, [Validators.required]),
'storyline': new FormControl(storyline, [Validators.required]),
'summary': new FormControl(summary, [Validators.required]),
'year': new FormControl(year, [Validators.required]),
'length': new FormControl(length, [Validators.required]),
'status': new FormControl(status, [Validators.required]),
'short_url': new FormControl(short_url, [Validators.required]),
'poster': new FormControl(poster, [Validators.required])
});
this.editDocumentaryForm.statusChanges.subscribe(
(status) => console.log(status)
);
}
onFileChange(event) {
let reader = new FileReader();
if(event.target.files && event.target.files.length) {
const [file] = event.target.files;
reader.readAsDataURL(file);
reader.onload = () => {
this.editDocumentaryForm.patchValue({
poster: reader.result
});
// need to run CD since file load runs outside of zone
this.cd.markForCheck();
};
}
}
onSubmit() {
console.log(this.editDocumentaryForm);
}
}
答案 0 :(得分:0)
在路由中,请确保使用相同的名称“ data”来命名解析器:
{ path: 'somepath', component: AdminDocumentaryEditComponent, resolve: { data: DocumentaryResolverService} }