Почему моя привязка входного свойства не работает?- угловой

Question

Я получаю свойство как неопределенное при попытке привязки входного свойства.Компонент с входными данными: like.component.ts `

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

@Component({
  selector: 'like',
  templateUrl: './like.component.html',
  styleUrls: ['./like.component.css']
})
export class LikeComponent{
  @Input('is-liked') isLiked: boolean;
  @Input('likes-count') likesCount: number;


  onClick(){
    console.log("clicked");
    console.log(this.likesCount);
    console.log(this.isLiked);
    this.likesCount += (this.isLiked) ? -1 : 1;
    this.isLiked = !this.isLiked;

  }

}

` like.component.html

<p>
  likes work
</p>
<span class="glyphicon glyphicon-heart"
      [class.highlighted]="isLiked"
      (click)=onClick()></span>
<span>{{ likesCount }}</span>

app.component.ts

import { Component } from '@angular/core';
import { LikeComponent } from './like/like.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

    isSelected = true;
    likesCount = 5;


}

app.component.html

<like 
[likes-count]="likesCount"
[is-liked]="isSelected"
></like>

Я объявляю входные свойства в компоненте Like, а затем связываю их в компоненте приложения - но, похоже, значения не передаются: Консоль инструментов разработчика

Answer 1

В app.module.ts у меня было

 bootstrap: [AppComponent, LikeComponent]

и я изменил его на:

 bootstrap: [AppComponent]

, теперь свойства связываются, как и ожидалось.

Answer 2

Вы должны просто иметь

<like 
[likescount]="likesCount"
[isliked]="isSelected"
></like>

и

 @Input() isLiked: boolean;
 @Input() likesCount: number;

DEMO STACKBLITZ