Свойство углового ввода всегда верно

Question

Я занимаюсь разработкой приложения Angular 6, я создал пользовательский компонент с некоторыми входными данными.Однако, когда я передаю значение false, оно обрабатывается как true.Вот мой пользовательский компонент

      <div class="row">
         <div class="manager-actions col-md-12">
         <div class="manager-actions__crud">
         <button *ngIf="showAddButton" (click)="onAddClick($event)" type="button" class="btn btn-primary btn-icon">
         <i class="nb-plus-circled"></i>
      </div>

Мой класс компонентов

export class TableActionsComponent implements OnInit {
    constructor(private urlService: UrlManipulationService, private activatedRoute: ActivatedRoute, private actionService: TopbarActionsService) {
    }

    @Input() showDatePicker: boolean = false;
    @Input() showAddButton: boolean = false;
    @Input() showDeleteButton: boolean = false;

    @Input() showPerPageSelector: boolean = false;
}

И я пытаюсь использовать его следующим образом

<ngx-table-actions showAddButton="false" showDeleteButton="true" showDatePicker="true"></ngx-table-actions>

Но он показывает элементы, даже если false установлено.

Answer 1

Когда вы передаете входные параметры, такие как showAddButton="false", логическое значение передается в виде строки.Поэтому любая непустая строка приведет к логическому значению true.

Вы можете использовать синтаксис привязки свойств следующим образом:

<ngx-table-actions [showAddButton]="false"></ngx-table-actions>

Или вы можете переопределить установки для вводазначение свойства:

private _showAddButton = true;

@Input('showAddButton')
get showAddButton(): boolean {
  return this._showAddButton;
}

Это должно решить вашу проблему.

Answer 2

Скобки, [], говорят Angular, чтобы он вычислял выражение шаблона.Если вы опустите скобки, Angular обрабатывает строку как константу и инициализирует целевое свойство с этой строкой

<ngx-table-actions [showAddButton]="false" [showDeleteButton]="true" [showDatePicker]="true"></ngx-table-actions>

установите свойство, подобное этому showAddButton="false" означает, что значение равно 'true' как строкаи это всегда оценивается как правдивое

прочитайте это Запомните скобки