Angular 8 ошибка. 'show' не существует по типу

Question

Я новичок в angular 8. В настоящее время я выполняю небольшое задание для колледжа, но из-за всего этого происходящего в Covid 19 общение с лекцией ограничено, и из-за этого я замедляюсь.

Я погуглил ошибку целую вечность и, кажется, не могу найти, что случилось.

Спасибо.

<button (click)="show = !show">{{show ? 'Hide' : 'Add a car'}}</button>

<div *ngIf="show">
    <form>
        <label>Make</label>
        <input type="text" name="make" placeholder="Enter Make" #make>

        <label>Model</label>
        <input type="text" name="model" placeholder="Enter Model" #model>

        <label>Year</label>
        <input type="text" name="year" placeholder="Enter Year" #year>

        <button type="submit" (click)="addTheCar(make.value,
             model.value,year.value)">Add the Car</button>
    </form>

</div>

<div class="container">
    <app-car *ngFor="let carData of carsData" [carData]="carData"></app-car>
</div>

Это carlist.component. html (куда меня отправляет ошибка)

import { Component, OnInit } from '@angular/core';
import { ICar, Car } from '../interfaces/car';
import { CarApiService } from '../services/car-api.service';



@Component({
  selector: 'app-carlist',
  templateUrl: './carlist.component.html',
  styleUrls: ['./carlist.component.css'],
  providers: [CarApiService]
})
export class CarlistComponent implements OnInit {
  carsData: ICar[];

  constructor(private _carAPIService:CarApiService) { }


  ngOnInit(): void{
    this._carAPIService.getCarData().subscribe(carsData =>
      {this.carsData = carsData});
  }

  addTheCar(make:string, model:string, year:string):boolean{
    let tempCar:ICar;
    tempCar= new Car(make,model,year);
    this._carAPIService.addCarData(tempCar);
    return false;
  }

}

Answer 1

Это то, что говорится: у вашего компонента нет свойства show. Добавьте show = false; под вашей carsData строкой, и она должна go прочь.

Answer 2

Вы должны определить show в CarlistComponent.ts

export class CarlistComponent implements OnInit {
    show:boolean;

Answer 3

укажите логическое значение для шоу

export class CarlistComponent implements OnInit {
    public show = true;

Только когда show = true, этот div будет выполнен

<div *ngIf="show">
    <form>
        <label>Make</label>
        <input type="text" name="make" placeholder="Enter Make" #make>

        <label>Model</label>
        <input type="text" name="model" placeholder="Enter Model" #model>

        <label>Year</label>
        <input type="text" name="year" placeholder="Enter Year" #year>

        <button type="submit" (click)="addTheCar(make.value,
             model.value,year.value)">Add the Car</button>
    </form>

</div>

Answer 4

попробуйте

import { Component, OnInit } from '@angular/core';
import { ICar, Car } from '../interfaces/car';
import { CarApiService } from '../services/car-api.service';



@Component({
  selector: 'app-carlist',
  templateUrl: './carlist.component.html',
  styleUrls: ['./carlist.component.css'],
  providers: [CarApiService]
})
export class CarlistComponent implements OnInit {
  carsData: ICar[];
  show:boolean;

  constructor(private _carAPIService:CarApiService) { }


  ngOnInit(): void{
    this._carAPIService.getCarData().subscribe(carsData =>
      {this.carsData = carsData});
  }

  addTheCar(make:string, model:string, year:string):boolean{
    let tempCar:ICar;
    tempCar= new Car(make,model,year);
    this._carAPIService.addCarData(tempCar);
    return false;
  }

}