简体   繁体   English

复选框检查角度4中的值是否为true

[英]Checkbox checked if the value is true in angular 4

I have a checkbox when on certain condition we need to make the checkbox checked.For eg Whenever accept() function calls, it triggers onApprovedDateChecked() function by passing true as a parameter.Whenever i get true i need to make the checkbox to be checked.Can anyone help me to sort this out?? 我有一个复选框,当某些条件下,我们需要做的复选框checked.For例如,每当accept()函数调用,它会触发onApprovedDateChecked()通过传递正确的parameter.Whenever我得到的功能true我需要的复选框是检查。有人可以帮我解决这个问题吗?

component.html component.html

 <p-checkbox label="dsd" formControlName="fcont" binary="true" 
                               (onChange)="onChecked($event)"></p-checkbox>

component.ts component.ts

    accept(){
      onChecked(true)
    }

   onChecked(e: any){

     //make the checkbox to checked
   }
<p-checkbox label="dsd" [(ngModel)]="status" 
formControlName="fcont" binary="true"(onChange)="onChecked($event)"></p-checkbox>

Now define status before constructor like this in your ts file 现在在ts文件中像这样的构造函数之前定义状态

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

    @Component({
      selector: 'component',
      templateUrl: './component.html',
      styleUrls: ['./component.scss']
    })
    export class RequestReturnComponent implements OnInit {
    status: boolean = false;
    constructor() {}

    ngOnInit() {}

    accept(){
     onChecked(true)
    }

    onChecked(e: any){
      this.status = true;
    }
  }

Use ngModel with binary to change its boolean value 将ngModel与二进制一起使用以更改其布尔值

<p-checkbox label="dsd" [(ngModel)]="obj.status" 
formControlName="fcont" binary="true"(onChange)="onChecked($event)"></p-checkbox>

Set obj.status to true or false to change. 将obj.status设置为true或false进行更改。

accept(){
 onChecked(true)
}

onChecked(e: any){
  this.obj.status = true;
}

You may like the async pipe for this, the implementation for this would look like this 您可能喜欢async管道,此实现看起来像这样

@Component({
  selector: 'async-checkbox-pipe',
  template: '<input type="checkbox" [checked]="onApprovedDateChecked | async" /> Async checked'
})
export class AsyncCheckboxPipeComponent {
  onApprovedDateChecked = new Observable<string>((observer: Observer<string>) => {
    // use the observer to dispatch checked or not later on
      setTimeout(() => {
        return observer.next(true|false)
      }, 1500);
  });
}

Example here https://stackblitz.com/edit/angular-8cqcph 这里的例子https://stackblitz.com/edit/angular-8cqcph

HTML HTML

<p-checkbox label="dsd" [checked]="checkValue" formControlName="fcont" (onChange)="onChecked($event)">
</p-checkbox>

component.ts component.ts

//declare variable

checkValue:boolean = false;

---function--- - -功能 - -

accept(){
checkValue = true;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM