Currently, I am facing an issue with a component that is meant to edit an existing database listing on my fictional buy/sell app project. Upon startup, the error message I encounter is as follows:
Error: src/app/edit-listing-page/edit-listing-page.component.html:8:9 - error TS2322: Type 'number' is not assignable to type 'string'.
[currentPrice] = "listing.price">
src/app/edit-listing-page/edit-listing-page.component.ts:9:16
9 templateUrl: './edit-listing-page.component.html',
Error occurs in the template of component EditListingPageComponent.
I'm wondering what exactly I might be missing here. Any insights would be greatly appreciated. Thanks, Ironman
edit-listing-page.component.html
<div class="content-box" *ngIf="listing">
<h2>Edit Listing</h2>
<app-listing-data-form
buttonText="Save Changes"
(onSubmit)="onSubmit($event)"
[currentName]="listing.name"
[currentDescription]="listing.description"
[currentPrice]= "listing.price" >
</app-listing-data-form>
</div>
<div class="content-box" *ngIf="!listing">
<h3>Loading...</h3>
</div>
edit-listing-page.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ListingsService } from '../listings.service';
import { Listing } from '../types';
@Component({
selector: 'app-edit-listing-page',
templateUrl: './edit-listing-page.component.html',
styleUrls: ['./edit-listing-page.component.css']
})
export class EditListingPageComponent implements OnInit {
listing: Listing;
constructor(
private route: ActivatedRoute,
private router: Router,
private listingsService: ListingsService,
) { }
ngOnInit(): void {
const id = this.route.snapshot.paramMap.get('id');
this.listingsService.getListingById(id)
.subscribe(listing => this.listing = listing);
}
onSubmit({name, description, price}):void{
alert('Saving changes to the listing...');
this.listingsService.editListing(this.listing.id, name, description, price)
.subscribe(() => {
this.router.navigateByUrl('/my-listings');
});
}
}
types.ts
export interface Listing{
id: string,
name: string,
description: string,
price:number,
views: number,
};
listings.service.ts
editListing(id:string, name:string, description:string, price:number): Observable<Listing>{
return this.http.post<Listing>(
`/api/listings/${id}`,
{name, description, price },
httpOptions,
);
}
listing-data-form.component.ts
import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { Router } from '@angular/router';
import { Listing } from '../types';
@Component({
selector: 'app-listing-data-form',
templateUrl: './listing-data-form.component.html',
styleUrls: ['./listing-data-form.component.css']
})
export class ListingDataFormComponent implements OnInit {
@Input() buttonText;
@Input() currentName = '';
@Input() currentDescription= '';
@Input() currentPrice= '';
name:string = '';
description:string = '';
price:string = '';
@Output() onSubmit = new EventEmitter<Listing>();
constructor(
private router: Router,
) { }
ngOnInit(): void {
this.name = this.currentName;
this.description = this.currentDescription;
this.price = this.currentPrice;
}
onButtonClicked(): void{
this.onSubmit.emit({
id: null,
name: this.name,
description: this.description,
price:Number(this.price),
views: 0,
});
}
}
listing-data-form.component.html
<div>
<label for="price">
Price:
</label>
<input id="price" name="price" type="text" [(ngModel)] = "price" />
</div>
<button type="submit">{{buttonText}}</button>