时间戳

首页 > 解决方案 > RESOLVE Angular 属性“照片”在类型“Spot []”上不存在

angular - RESOLVE Angular 属性“照片”在类型“Spot []”上不存在

问题描述

我是 Angular 的新手，我有一个问题：

当我启动 ng serve 时一切正常，但是当我启动 ng serve --prod 我有很多这样的错误： ERROR in src/app/spot/edit/edit-spot/edit-spot.component.html(35,73): Property 'photo' does not exist on type 'Spot[]'并且无法编译。

如果有人可以帮助我了解发生了什么，因为我认为我做错了什么，但我不明白是什么

我给你我的代码：

错误：

src/app/spot/edit/edit-spot/edit-spot.component.html(27,128): Property 'i' does not exist on type 'EditSpotComponent'.
src/app/spot/edit/edit-spot/edit-spot.component.html(35,73): Property 'photo' does not exist on type 'Spot[]'.
src/app/spot/edit/edit-spot/edit-spot.component.html(34,24): Property 'photo' does not exist on type 'Spot[]'.
src/app/spot/edit/edit-spot/edit-spot.component.html(3,20): Property 'title' does not exist on type 'Spot[]'.
src/app/spot/edit/edit-spot/edit-spot.component.html(17,34): Property 'title' does not exist on type 'Spot[]'.
src/app/spot/edit/edit-spot/edit-spot.component.html(17,63): Property 'title' does not exist on type 'Spot[]'.
src/app/spot/edit/edit-spot/edit-spot.component.html(21,39): Property 'synopsis' does not exist on type 'Spot[]'.
src/app/spot/edit/edit-spot/edit-spot.component.html(21,71): Property 'synopsis' does not exist on type 'Spot[]'.
src/app/spot/edit/edit-spot/edit-spot.component.html(33,22): Property 'photo' does not exist on type 'Spot[]'.
src/app/spot/edit/edit-spot/edit-spot.component.html(41,83): Property 'markerLatLng' does not exist on type 'Spot[]'.
src/app/spot/edit/edit-spot/edit-spot.component.html(41,83): Property 'markerLatLng' does not exist on type 'Spot[]'.
src/app/spot/edit/edit-spot/edit-spot.component.html(42,17): Property 'cursorStyle' does not exist on type 'EditSpotComponent'.
src/app/spot/edit/edit-spot/edit-spot.component.html(45,32): Property 'markerLatLng' does not exist on type 'Spot[]'.
src/app/spot/edit/edit-spot/edit-spot.component.html(45,32): Property 'markerLatLng' does not exist on type 'Spot[]'.
src/app/spot/edit/edit-spot/edit-spot.component.html(45,32): Property 'markerLatLngTwo' does not exist on type 'Spot[]'.
src/app/spot/edit/edit-spot/edit-spot.component.html(45,32): Property 'markerLatLngTwo' does not exist on type 'Spot[]'.
src/app/spot/edit/edit-spot/edit-spot.component.html(56,29): Property 'markerLatLng' does not exist on type 'Spot[]'.
src/app/spot/edit/edit-spot/edit-spot.component.html(56,29): Property 'markerLatLng' does not exist on type 'Spot[]'.
src/app/spot/edit/edit-spot/edit-spot.component.html(57,29): Property 'markerLatLngTwo' does not exist on type 'Spot[]'.
src/app/spot/edit/edit-spot/edit-spot.component.html(57,29): Property 'markerLatLngTwo' does not exist on type 'Spot[]'.

编辑-spot.component.html：

<div *ngIf="spot" class="mt-5">
  <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Edit Spot: {{ spot.title }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
      <div class="btn-group">
        <button class="btn btn-sm btn-outline-secondary" (click)="goBack()">Retour</button>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-12">
      <div class="pricing-header form-block mx-auto">
        <form [formGroup]="editForm" (ngSubmit)="updateForm()" novalidate>
          <div class="form-group">
            <label for="title">Titre</label>
            <input type="text" placeholder="{{spot.title}}" value="{{spot.title}}" id="title" class="form-control"
              formControlName="title">
          </div>
          <div class="form-group">
            <label for="synopsis">Synopsis</label>
            <textarea id="synopsis" placeholder="{{spot.synopsis}}" value="{{spot.synopsis}}" class="form-control"
              formControlName="synopsis">
                </textarea>
          </div>
          <div class="form-group">
            <label for="synopsis">Catégorie: </label><br>
            <mat-list-item *ngFor="let item of categoriesCheckBox">
              <mat-checkbox [(ngModel)]="item.checked" [disabled]="item.disabled" [ngModelOptions]="{standalone: true}"
                (change)="onChange($event, i, item)">
                {{ item.label }}</mat-checkbox>
            </mat-list-item>
          </div>
          <div>
            <h4>Photos:</h4>
            <div *ngFor="let itm of spot.photo | keyvalue; let i = index">
              <div (click)="deletePics(spot, spot.photo[i])">Supprimer </div>
              <img style="max-width: 300px;" class="spot-carousel" [src]="spot.photo[i]">
            </div>
          </div>
          <div class="form-group">
            <p *ngIf="coordinates">{{coordinates[0]}},{{coordinates[1]}}</p>
            <mgl-map [style]="'mapbox://styles/mapbox/streets-v9'" [zoom]="[16]"
              [center]="[spot.markerLatLng[0], spot.markerLatLng[1]]" [cursorStyle]="cursorStyle">
              <mgl-control mglNavigation></mgl-control>
              <mgl-geojson-source id="oneline">
                <mgl-feature
                  [geometry]="{'type': 'LineString','coordinates': [[spot.markerLatLng[0], spot.markerLatLng[1]] , [spot.markerLatLngTwo[0], spot.markerLatLngTwo[1]]]}">
                </mgl-feature>
              </mgl-geojson-source>
              <mgl-layer id="route" type="line" source="oneline" [layout]="{
                    'line-join': 'round',
                    'line-cap': 'round'
                  }" [paint]="{
                    'line-color': '#DC143C',
                    'line-width': 3
                  }">
              </mgl-layer>
              <mgl-marker [lngLat]="[spot.markerLatLng[0], spot.markerLatLng[1]]" [draggable]="true"
                (dragEnd)="onDragEnd($event)"></mgl-marker>
              <mgl-marker [lngLat]="[spot.markerLatLngTwo[0], spot.markerLatLngTwo[1]]" [draggable]="true"
                (dragEnd)="onDragEndTwo($event)"></mgl-marker>
              <mgl-control mglScale unit="metrique" position="bottom-right"></mgl-control>
            </mgl-map>
          </div>
          <button class="btn btn-success" [disabled]="editForm.invalid || fileIsUploading" type="submit">Enregistrer
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

编辑-spot.component.ts：

import { Component, OnInit, AfterViewInit, NgZone } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { SpotsService } from '../../../services/spots.service';
import { ActivatedRoute, Router } from "@angular/router";
import { Location } from '@angular/common';
import { Marker } from 'mapbox-gl';
import * as firebase from 'firebase';
import { Spot } from 'src/app/models/spot';
@Component({
  selector: 'app-edit-spot',
  templateUrl: './edit-spot.component.html',
  styleUrls: ['./edit-spot.component.scss']
})
export class EditSpotComponent implements OnInit {

  editForm: FormGroup;
  addValueForm: {};
  coordinates: number[];
  coordinatesTwo: number[];
  fileIsUploading = true;
  fileUrl: string;
  fileUploaded = false;
  spot: Spot[];
  categoriesCheckBox = [];
  categoriesChecked = [];
  lastAction: string;

  constructor(
    private crudApi: SpotsService,
    private fb: FormBuilder,
    private location: Location,
    private actRoute: ActivatedRoute,
    private router: Router,
  ) {
    this.categoriesCheckBox = [{ label: 'Simple Line', disabled: false, checked: false }, { label: 'Highline', disabled: false, checked: false }, { label: 'Waterline', disabled: false, checked: false }, { label: 'Midline', disabled: false, checked: false }, { label: 'Rodeoline', disabled: false, checked: false }, { label: 'Longline', disabled: false, checked: false }, { label: 'Trickline', disabled: false, checked: false }];
  }

  ngOnInit() {
    this.updateSpotData();
    const id = this.actRoute.snapshot.paramMap.get('id');
    this.crudApi.getSpot(id).valueChanges().subscribe(data => {
      this.spot = data;
      this.fileUrl = this.spot['photo'];
    })
  }

  updateSpotData() {
    this.editForm = this.fb.group({
      title: ['', Validators.required],
      synopsis: ''
    })
  }

  onDragEnd(marker: Marker) {
    NgZone.assertInAngularZone();
    this.coordinates = marker.getLngLat().toArray();
  }
  onDragEndTwo(markerTwo: Marker) {
    NgZone.assertInAngularZone();
    this.coordinatesTwo = markerTwo.getLngLat().toArray();
  }

  onChange(event, index, item) {
    this.lastAction = 'index: ' + index + ', label: ' + item.label + ', checked: ' + item.checked;
    if (event.checked) {
      this.categoriesChecked.push(item.label);
    }
    else if (!event.checked) {
      const index = this.categoriesChecked.indexOf(item.label);
      this.categoriesChecked.splice(index, 1);
    }
  }
  onUploadFile(file: File) {
    this.fileIsUploading = true;
    this.crudApi.uploadFile(file).then(
      (url: string) => {
        this.fileUrl = url;
        this.fileIsUploading = false;
        this.fileUploaded = true;
      }
    );
  }
  detectFiles(event) {
    this.onUploadFile(event.target.files[0]);
  }
  goBack() {
    this.location.back();
  }

  deletePics(spot, photoUrl: string) {

    if (window.confirm('Voulez-vous supprimer cette photo?')) {
      this.crudApi.deleteSinglepics(spot.$key, photoUrl);
      //this.toastr.success(spot.title + 'spot supprimé');
    }
  }
  updateForm() {
    const userId = firebase.auth().currentUser.uid;
    const markerOneLatLng = this.coordinates;
    const markerTwoLatLng = this.coordinatesTwo;
    this.addValueForm = this.editForm.value;
    this.addValueForm['userId'] = userId;
    this.addValueForm['markerLatLng'] = markerOneLatLng;
    this.addValueForm['markerLatLngTwo'] = markerTwoLatLng;
    this.addValueForm['categories'] = this.categoriesChecked;
    if (this.fileUrl && this.fileUrl !== '') {
      this.addValueForm['photo'] = this.fileUrl;
    }
    console.log(this.editForm.value);
    this.crudApi.updateSpot(this.editForm.value);
    this.router.navigate(['view-spot']);
  }
}

现货.ts：

export interface Spot {
    $key: string;
    title: string;
    synopsis: string;
    userId: string;
    markerLatLng: number[];
    markerLatLngTwo: number[];
    photo: string[];
    categories: string[];
}

标签： angular

解决方案

spot被定义spot: Spot[]为非Spot。您需要将其定义为Spot或循环Spot[]或使用spot[0]而不是spot在 HTML 中。向我发送data看起来如何提供更多帮助。

推荐阅读