Angular问题：@Input布尔值与ngIf不匹配

Hey there! Let's break down the common reasons your modifiable input might not be working as expected, and fix them step by step.

1. Missing Default Value for the Input Property #

Looking at your slider-multiple.component.ts code, the modifiable input is declared but not initialized. That means it starts as undefined, and Angular treats undefined as falsy in *ngIf—so your button won't show up even if you don't explicitly set it to false.

Fix: Add a default boolean value to the input:

import { Component, Input } from '@angular/core';
@Component({
  selector: 'slider-multiple',
  templateUrl: './slider-multiple.component.html'
})
export class SliderMultipleComponent {
  // Add a default value here
  @Input() public modifiable: boolean = false;
}

Or use the shorter shorthand:

@Input() public modifiable = false;

2. Incorrect Syntax When Passing the Input from the Parent Component #

If you're calling the component in a parent template, you need to use the right syntax to pass the boolean value correctly:

• To pass a literal boolean value: Use square brackets to bind the value (this tells Angular to treat it as a boolean, not a string):

  <!-- Correct: passes the boolean true -->
  <slider-multiple [modifiable]="true"></slider-multiple>
  
  <!-- Incorrect: passes the string "true" (which is truthy, but not a proper boolean) -->
  <slider-multiple modifiable="true"></slider-multiple>
  

• To pass a variable from the parent component: First define the variable in the parent's TypeScript file, then bind it in the template:
  Parent component TypeScript:

  isSliderModifiable = true;
  

  Parent template:

  <slider-multiple [modifiable]="isSliderModifiable"></slider-multiple>
  

3. Double-Check for Typos #

It's easy to miss a small typo! Make sure:

• The input name modifiable matches exactly between your child component's TypeScript and the parent template (Angular is case-sensitive here)
• You didn't accidentally misspell it (like writing modifyable with an extra 'y')

Give these fixes a try—they should resolve most common input binding issues with your component.

内容的提问来源于stack exchange，提问作者basileLeBienheureux