javascript - 运行 ng build --prod 时，类型“{}”上不存在属性“title”，但可以与 ng serve 一起使用

Question

当我运行 ng serve 时，应用程序运行良好。当我运行 ng build --prod 时出现一堆 Property does not exist on type {} 错误，我无法部署。我相信这是因为 recipe = {}; 当我将它设置为食谱时；从数据库中填充的下拉列表是空白的，并且表单页面的控制台中会出现各种其他错误。

这是我的代码 .ts 文件

import { RecipeService } from './../recipe.service';
import { Observable } from 'rxjs/Observable';
import { CategoryService } from './../category.service';
import { Component } from '@angular/core';
import { AngularFireObject, AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { FirebaseListObservable } from "angularfire2/database-deprecated";
import { FormGroup, FormControl, FormArray } from '@angular/forms';
import { FirebaseApp } from 'angularfire2';
import { RecurseVisitor } from '@angular/compiler/src/i18n/i18n_ast';
import { Router, ActivatedRoute } from '@angular/router';
import 'rxjs/add/operator/take';

@Component({
  selector: 'app-recipe-form',
  templateUrl: './recipe-form.component.html',
  styleUrls: ['./recipe-form.component.css']
})
export class RecipeFormComponent {
  categories$: Observable<any>;
  recipe = {};
  id;

  form = new FormGroup({
    ingredients: new FormArray([])
  });

  constructor(
    private categoryService: CategoryService, 
    private recipeService: RecipeService,
    private router: Router,
    private route: ActivatedRoute) {

    this.categories$ = categoryService.getCategories();
    this.id = this.route.snapshot.paramMap.get('id');
    if(this.id) this.recipeService.get(this.id).take(1).subscribe(r => this.recipe = r);
   }

   save(recipe){
      recipe.ingredientsList = this.form.value;
      if(this.id) this.recipeService.update(this.id, recipe);
      else this.recipeService.create(recipe);
      this.router.navigate(['/recipes']);
      //  console.log(recipe);     
    }



  addIngredient(ingredient: HTMLInputElement) {
    this.ingredients.push(new FormControl(ingredient.value));
    ingredient.value = '';
  }

  getList(){
    return this.form.get('ingredients') as FormArray;
  }

  get ingredients() {
    return this.form.get('ingredients') as FormArray;
  }


  removeIngredient(ingredient: FormControl){
    let index = this.ingredients.controls.indexOf(ingredient);
    this.ingredients.removeAt(index);
  }
}

这是html表单：

<div class="row">
  <div class="col-md-6">
    <form #f="ngForm" (ngSubmit)="save(f.value)">
      <div class="form-group">
        <label for="title">Title</label>
        <input #title="ngModel" [(ngModel)]="recipe.title" name="title" id="title" type="text" class="form-control" required>
        <div class="alert alert-danger" *ngIf="title.touched && title.invalid">
          Title is required
        </div>
      </div>

      <div class="form-group">
          <label for="source">Recipe Source</label>
          <input #source="ngModel" [(ngModel)]="recipe.source" name="source" id="source" type="source" class="form-control" required>
          <div class="alert alert-danger" *ngIf="source.touched && source.invalid">
            Source is required
          </div>
        </div>

      <div class="form-group">
        <label for="category">Category</label>
        <select #category="ngModel" [(ngModel)]="recipe.category" name="category" id="category" class="form-control" required>
          <option value=""></option>
          <option *ngFor="let c of categories$ | async" [value]="c.key">
            {{ c.name }}
          </option>      
        </select>
        <div class="alert alert-danger" *ngIf="category.touched && category.invalid">
          Category is required
        </div>
      </div>

      <div class="form-group">
        <label for="ingredientsList">Ingredients</label>
        <div class="input-group mb-3">
          <input #ingredientsList="ngModel" ngModel name="ingredientsList" id="ingredientsList" type="text" class="form-control" (keyup.enter)="addIngredient(ingredient)" #ingredient required>
          <div class="input-group-append">
            <button type="button" class="input-group-text fa fa-plus" (click)="addIngredient(ingredient)"></button>
          </div>
        </div>
          <div *ngIf="recipe.ingredientsList">
            <ul class="list-group">
              <li 
                *ngFor="let i of recipe.ingredientsList.ingredients"
                (click)="removeIngredient(i)"                
                class="list-group-item">
                {{ i }}
              </li>
            </ul>
          </div>

          <ul class="list-group">
            <li
              *ngFor="let i of ingredients.controls"
              (click)="removeIngredient(i)"
              class="list-group-item">
              {{ i.value }}
            </li>
          </ul>
        <div class="alert alert-danger" *ngIf="ingredientsList.touched && ingredientsList.invalid">
          Ingredients are required
        </div>
      </div>

      <div class="form-group">
          <label for="directions">Directions</label>
          <textarea #directions="ngModel" [(ngModel)]="recipe.directions" name="directions" id="directions" class="form-control"  rows="3" required></textarea>
          <div class="alert alert-danger" *ngIf="directions.touched && directions.invalid">
              Directions are required
          </div>
      </div>

      <div class="form-group">
        <label for="imageUrl">Image URL</label>
        <input #imageUrl="ngModel" [(ngModel)]="recipe.imageUrl" name="imageUrl" id="imageUrl" type="text" class="form-control" required url>
        <div class="alert alert-danger" *ngIf="imageUrl.touched && imageUrl.invalid">
          <div *ngIf="imageUrl.errors.required">Image URL is required</div>
          <div *ngIf="imageUrl.errors.url">Please enter valid URL</div>      
        </div>
      </div>

      <button (click)="save(f.value)" type="button" class="btn btn-primary">Save</button>
    </form>
  </div>

  <div class="col-md-6">
    <div class="card" style="width: 18rem;">
      <img class="card-img-top" [src]="recipe.imageUrl" *ngIf="recipe.imageUrl">
      <div class="card-body">
        <h5 class="card-title">{{ recipe.title }}</h5>
        <p class="card-text">{{ recipe.source }} </p>
      </div>
    </div>
  </div>  
</div>

标签： javascriptangularformsfirebasefirebase-realtime-database

Answer 1

我认为 Pengyy 所说的是为该属性创建一个接口（或类）。请看下面的代码：

export class Recipe implements IRecipe {
    source: any;
    ingredients: any[];
}

export interface IRecipe {
    source: any;
    ingredients: any[];
}

export class RecipeFormComponent {
    categories$: Observable<any>;
    recipe: Recipe;
}

我认为您也可以将 recipe 属性设置为 any 类型。请看下面：

export class RecipeFormComponent {
    categories$: Observable<any>;
    recipe: any;
}