我需要声明这个变量来输入任何?这显示在我的
HTML模板中的可视代码编辑器中.
产品form.component.html
<div class="row"> <div class="col-md-6"> <form #form="ngForm" (ngSubmit)="save(form.value)"> <div class="form-group"> <label for="title">Title</label> <input #title="ngModel" [(ngModel)]="product.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="price">Price</label> <div class="input-group"> <span class="input-group-addon">$</span> <input #price="ngModel" ngModel [(ngModel)]="product.price" name="price" id="price" type="number" class="form-control" required [min]="0"> </div> <div class="alert alert-danger" *ngIf="price.touched && price.invalid"> <div *ngIf="price.errors.required">Price is required.</div> <div *ngIf="price.errors.min">Price should be 0 or higher.</div> </div> </div> <div class="form-group"> <label for="category">Category</label> <select #category="ngModel" ngModel [(ngModel)]="product.category" name="category" id="category" class="form-control" required> <option value=""></option> <option *ngFor="let category of categories$| async" [value]="category.key">{{ category.payload.val().name }}</option> </select> <div class="alert alert-danger" *ngIf="category.touched && category.invalid"> Category is required. </div> </div> <div class="form-group"> <label for="imageUrl">Image URL</label> <input #imageUrl="ngModel" ngModel [(ngModel)]="product.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 a valid URL.</div> </div> </div> <button class="btn btn-primary">Save</button> </form> </div> <div class="col-md-6"> <div class="card" style="width: 20rem;"> <img class="card-img-top" [src]="product.imageUrl" *ngIf="product.imageUrl"> <div class="card-block"> <h4 class="card-title">{{ product.title }}</h4> <p class="card-text">{{ product.price | currency: 'USD': symbol }}</p> </div> </div> </div> </div>
产品form.component.ts
import { Component,OnInit } from '@angular/core'; import { CategoryService } from '../../category.service'; import { ProductService } from '../../product.service'; import { Router } from '@angular/router'; import { ActivatedRoute } from '@angular/router'; import 'rxjs/add/operator/take'; @Component({ selector: 'app-product-form',templateUrl: './product-form.component.html',styleUrls: ['./product-form.component.css'] }) export class ProductFormComponent implements OnInit { categories$; product: any = {}; constructor( private router: Router,private route: ActivatedRoute,private categoryService: CategoryService,private productService: ProductService) { this.categories$= categoryService.getCategories(); let id = this.route.snapshot.paramMap.get('id'); if (id) { this.productService.get(id).take(1).subscribe(p => this.product = p); } } save(product) { this.productService.create(product); this.router.navigate(['/admin/products']); } ngOnInit() { } }
如何删除此错误?应用程序中的功能似乎没有受到影响.所以根据我的理解,它编译成有效的JS.我能够通过将其声明为“任何”来修复对象
如果可能的话,我有兴趣学习如何为此设置接口.