Question

当尝试单击父组件上的按钮时，我试图使用ngIf有条件地显示allrecords-app组件的内容。父组件是dropdown-app。当我在本地运行程序时，该应用程序为空白，并且出现此错误：模板解析错误：

无法绑定到“ showMePartially”，因为它不是的已知属性 “ allrecords-app”。

<allrecords-app>
<div *ngIf="showMePartially">
  <h1> this part will be toggled by the parent component button</h1>
</div>

import { Component, OnInit } from '@angular/core';
import { Input } from '@angular/core';

@Component({
  selector: 'app-allrecords',
  templateUrl: './allrecords.component.html',
  styleUrls: ['./allrecords.component.css']
})
export class AllrecordsComponent implements OnInit {
  @Input() showMePartially: boolean;

  constructor() { }

  ngOnInit() {
  }

}

<dropdown-app>
<div class="All_Records">
    <button type="button" label="Click" (click)="toggleChild()">Click to display all records</button>
    <div>
        <allrecords-app [showMePartially]="showVar"></allrecords-app>
    </div>


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

@Component({
  selector: 'app-dropdown',
  templateUrl: './dropdown.component.html',
  styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent  {
  showVar: boolean = true;

    toggleChild(){
        this.showVar = !this.showVar;
    }

Answer 1

我为子组件使用了错误的选择器。固定！

模板解析错误：无法绑定到“ showMePartially”，因为它不是“ allrecords-app”的已知属性

1 个答案: