: 4200/null fehlgeschlagen Ressource laden: der Server mit einem Status von 404 geantwortet (nicht gefunden)

Question

I Angular 5.0.0 verwenden und AngularFire2 5

Der Fehler in der Konsole erscheint, wenn ich auf einer Seite bin Diese lädt die Informationen aus dem Firebase mithilfe der UID, die durch die URL übergeben wurde. Die Information wird dann in einem Formular angezeigt. Dies ist Teil meiner CRUD, genauer gesagt des Abschnitts Update/Edit.

Der Fehler, den ich in der Konsole angezeigt, wenn die Seite geladen wird:

:4200/null Failed to load resource: the server responded with a status of 404 (Not Found) 

Alles scheint richtig zu funktionieren? Ich bin mir nicht sicher, wie ich diesen Fehler diagnostizieren soll. Ich würde mich selbst als Anfänger betrachten, also leite mich bitte auf dem Weg des Lernens und Verstehens. Wenn es noch etwas zu liefern gibt, lassen Sie es mich wissen.

Danke für Ihre Zeit.

Produkt-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() { 
    } 

} 

Produkt-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> 

Answer 1

ich glaube, das Problem ist, wenn die Seite geladen wird die URL Produktbild nicht aus geladen wird Datenbank zuerst. So ...

am unteren Rand der HTML-Vorlage ein * ngIf Direktive zum product.imageUrl hinzufügen

*ngIf="product.imageUrl" 

Produkt-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>