angular - Angular 组件属性类型转换问题

问题描述

我有一个组件，我正在尝试编辑我正在开发的这个虚构的买卖应用程序的现有数据库列表。我在启动时收到的具体错误如下：

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.

我错过了什么？谢谢，钢铁侠

编辑列表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>

编辑列表页面.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');
      });
    
  }
}

类型.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,
    );
  }

列出数据-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,
    });
  }

}

列表数据form.component.html

<div>
        <label for="price">
            Price:
        </label>
        <input id="price" name="price" type="text" [(ngModel)] = "price" />
    </div>
        <button type="submit">{{buttonText}}</button>

标签： angulartypescript

angular - Angular 组件属性类型转换问题

问题描述

解决方案

推荐阅读