Angular 8 属性在 AppComponent 类型上不存在

Question

我使用Angular 8创建了一个小型应用程序，它只是一个带有 2 个选择器的应用程序。 但是在编译时，它的抛出Property 'DepScreen' does not exist on type 'AppComponent'错误中。

请在下面详细查找错误。

ERROR in src/app/app.component.html:10:20 - error TS2339: Property 'DepScreen' does not exist on type 'AppComponent'.

10         (click) = "DepScreen=true; EmpScreen=false;">
                      ~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.
src/app/app.component.html:10:36 - error TS2339: Property 'EmpScreen' does not exist on type 'AppComponent'.

10         (click) = "DepScreen=true; EmpScreen=false;">
                                      ~~~~~~~~~
                                  

请在下面找到 index.html 代码

  <nav class="navbar navbar-expand-sm bg-light navbar-dark">
    <ul class="navbar-nav">
      <li class="nav-item">
        <button class="m-1 btn btn-light btn-outline-primary" Button
        label = "DepScreen"
        (click) = "DepScreen=true; EmpScreen=false;">
        Departments
      </button>
      </li>
      <li class="nav-item">
        <button class="m-1 btn btn-light btn-outline-primary" Button
        label = "EmpScreen"
        (click) = "DepScreen=false; EmpScreen=true;">
        Employees
      </button>
      </li>
    </ul>
  </nav>

  <app-department *ngIf="DepScreen"></app-department>
  <app-employee *ngIf="EmpScreen"></app-employee>

请找到我的 app.component.ts 文件

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Hello World';
}

Answer 1

索引.html

  <nav class="navbar navbar-expand-sm bg-light navbar-dark">
    <ul class="navbar-nav">
      <li class="nav-item">
        <button class="m-1 btn btn-light btn-outline-primary" Button
        label = "DepScreen"
        (click) = "onScreenSelect()">
        Departments
      </button>
      </li>
      <li class="nav-item">
        <button class="m-1 btn btn-light btn-outline-primary" Button
        label = "EmpScreen"
        (click) = "onScreenSelect()">
        Employees
      </button>
      </li>
    </ul>
  </nav>

现在，在你的 app.component.ts

export class AppComponent {
  title = 'Hello World';
  DepScreen = true;  // put the default values 
  EmpScreen = false;

  onScreenSelect(){
     this.DepScreen = !this.DepScreen; // at any point in time only one screen is visible
     this.EmpScreen = !this.EmpScreen;
  }

}

Answer 2

索引.html

<nav class="navbar navbar-expand-sm bg-light navbar-dark">
<ul class="navbar-nav">
  <li class="nav-item">
    <button class="m-1 btn btn-light btn-outline-primary" Button
    label = "DepScreen"
    (click) = "onSelect(active=1)">
    Departments
  </button>
  </li>
  <li class="nav-item">
    <button class="m-1 btn btn-light btn-outline-primary" Button
    label = "EmpScreen"
    (click) = "onSelect(active=2)">
    Employees
  </button>
  </li>
</ul>

app.component.ts

export class AppComponent {
title = ''Hello World';
DepScreen = false;  // currently not visible
EmpScreen = false;  // currently not visible
active = 0

onSelect(active){
  if(active == 1){
    this.DepScreen = true; // department screen visible
    this.EmpScreen = false;
  }else if(active == 2){
    this.DepScreen = false; 
    this.EmpScreen = true;  // employee screen visible
  }else{
    this.DepScreen = false; 
    this.EmpScreen = false; 
  }
 }
}