Question

收到错误 TypeError:无法读取属性“长度”错误

2018-05-23

1520

angular typescript

我收到错误：

ERROR TypeError: Cannot read property 'length' of undefined at eval (webpack-internal:///./node_modules/@angular/common/esm5/http.js:163) at Array.forEach () at HttpHeaders.lazyInit (webpack-internal:///./node_modules/@angular/common/esm5/http.js:157) at HttpHeaders.init (webpack-internal:///./node_modules/@angular/common/esm5/http.js:305) at HttpHeaders.forEach (webpack-internal:///./node_modules/@angular/common/esm5/http.js:408) at Observable.eval [as _subscribe] (webpack-internal:///./node_modules/@angular/common/esm5/http.js:2210) at Observable._trySubscribe (webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:177) at Observable.subscribe (webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:165) at subscribeToResult (webpack-internal:///./node_modules/rxjs/_esm5/util/subscribeToResult.js:32) at MergeMapSubscriber._innerSub (webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:143)

当我尝试上传文件时会发生这种情况，但我不明白为什么，因为我没有在任何地方使用 length() 函数。

这是我的 html：

<app-supervisor-header></app-supervisor-header>
<main>
  <div class="container">
      <div class="col-sm">
        <h3>Wijzigen van examen: {{examen.naam}}</h3>
        <form #examUpdateForm="ngForm" (ngSubmit)="onSubmit(examUpdateForm)">
          <div class="row">
            <div class="col-3">
              <label for="vak">Naam</label>
            </div>
            <div class="col-5">
              <div class="form-group">
                <input class="form-control" type="text" id="vak" placeholder="{{examen.naam}}" />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-3">
              <label for="vak">Bestand</label>
            </div>
            <div class="col-5">
              <div class="form-group">
                <input type="file" name="examen_bestand" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp" (change)="fileChanged($event)">
                <small id="fileHelp" class="form-text text-muted">Hier kun je de huidige examenskelet vervangen.</small>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-8">
              <input type="submit" class="pxl-knop float-right" id="zoek-knop" value="Zoek" />
            </div>
          </div>
        </form>
      </div>
  </div>
</main>

这是组件：

export class SupervisorExamenAanpassenComponent implements OnInit {
  @Input() examen: Examen = new Examen(null, '', '', null);
  id: number;

  constructor(private serv: ExamService, private route: ActivatedRoute) { }

  onSubmit(form) {
    this.serv.updateExamById(this.id, this.examen).subscribe();
  }

  fileChanged(e) {
    const reader = new FileReader();
    reader.onload = () => {
      this.examen.file = reader.result;
    };
    reader.readAsText(e.target.files[0]);
  }

  ngOnInit() {
    this.route.params.subscribe(params => this.id = params.id);
    this.serv.getExamById(this.id).subscribe((data) => this.examen = data);
  }

}

第二次尝试提交时，它还告诉我错误来自 HTML 第 6 行，即：

<form #examUpdateForm="ngForm" (ngSubmit)="onSubmit(examUpdateForm)">

编辑：

ExamService：

@Injectable()
export class ExamService {
  examens: Examen[] = [];

  constructor(private http: HttpClient) {}

  getExams(): Observable<Examen[]> {
    return this.http.get<Examen[]>(APIURL + '/all');
  }

  getExamById(id): Observable<Examen> {
    return this.http.get<Examen>(APIURL + '/asobject/' + id);
  }

  updateExamById(id, exam: Examen) {
    const fd = new FormData();
    const options = {} as any;
    fd.append('file', exam.file);
    fd.append('name', exam.naam);
    return this.http.put<Examen>(APIURL + '/update/' + id, fd, {headers: {'Content-Type': undefined}});
  }
}

Answer 1

从 ExamService 中的 http.put 调用中删除此参数：

{headers: {'Content-Type': undefined}}

您不需要设置 Content-Type，因为根据我们下面的讨论，这些将由 angular 的 HttpClient api 为您正确设置。

此外，不要使用 FileReader 将文件的 Blob 内容转换为纯文本。而是只存储对文件的引用，并在提交时将文件及其名称附加到 FormData。例如

// Component
private file: File = null;

fileChanged(e) {
    this.file = e.target.files[0]);
}

onSubmit(form) {
  this.serv.updateExamById(this.id, this.file).subscribe();
}

// Service
updateExamById(id, file: File) {
  const fd = new FormData();   
  fd.append('file', file, file.name);
  return this.http.put<Examen>(APIURL + '/update/' + id, fd);
}