在组件方法中将* ngModel和变量值作为参数传递

时间:2018-11-28 09:26:10

标签: angular angular7

我有一个布尔变量。我想在组件方法中将此变量作为方法参数传递并更改其值。

但该值未更改。检查下面的m当前代码。

HTML

      <li class="list-group-item" (click)="selectUnselectAll(isAllSelected)">
        <span *ngIf="isAllSelected;else noneSelected">UnSelect All</span>
        <ng-template #noneSelected>Select All</ng-template>
      </li>

组件

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

        @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss']
        })
        export class AppComponent {
            isAllSelected:boolean;

            constructor() {
                this.isAllSelected = false;
            }


            selectUnselectAll(isAllSelected){
                console.log(isAllSelected);    
                isAllSelected = !isAllSelected;
                console.log(isAllSelected);    
            }
        }

此处 isAllSelected 是布尔值

更新:需要什么?

我要更改 isAllSelected 的值,因为不会出现“全部取消选择”文本。

输出

enter image description here

2 个答案:

答案 0 :(得分:0)

尝试使用this关键字,更改全局变量,而不是方法的本地变量

selectUnselectAll(isAllSelected){
   this.isAllSelected = !isAllSelected;
}

答案 1 :(得分:0)

在传递局部变量时应使用全局变量,但不要更改,因为绑定是在Angular中使用公共全局变量完成的。所以您的代码应该像这样-

  <li class="list-group-item" (click)="selectUnselectAll()">
        <span *ngIf="isAllSelected;else noneSelected">UnSelect All</span>
        <ng-template #noneSelected>Select All</ng-template>
      </li>

      selectUnselectAll(){
          this.isAllSelected = !this.isAllSelected;
      }

或  如果您不想使用全局变量,请这样做-

<li class="list-group-item" (click)="isAllSelected = !isAllSelected">
    <span *ngIf="isAllSelected;else noneSelected">UnSelect All</span>
    <ng-template #noneSelected>Select All</ng-template>
  </li>

无需调用任何函数。