我使用的是Angular 5.0.0和AngularFire2 5
当我使用通过URL传递的UID加载来自firebase信息的页面时,控制台中的错误出现。然后以形式显示该信息。这是我的CRUD的一部分,更具体地说是更新/编辑部分。
加载页面时,我在控制台中收到的错误:
:4200/null Failed to load resource: the server responded with a status of 404 (Not Found)
一切似乎正常工作?我不确定如何诊断此错误。我会认为自己是一个初学者,所以请指导我以学习和理解的方式。如果我需要提供其他任何东西,请在下面告诉我。
感谢您的时间。
product-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 = {};
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() {
}
}
product-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">
<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>
我相信问题是,当页面首先加载产品图像URL时,一开始就不会从数据库中加载。所以...
在HTML模板的底部,向产品添加 *NGIF指令。ImageUrl
*ngIf="product.imageUrl"
product-form.component.html
<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>