Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

140
Views
pantalla de radio de estera de filtro angular de un grupo de radio de estera

como puede ver en la captura de pantalla a continuación, tengo 2 botones que usan el grupo de radio mat, si modelForm.get ('programación'). El valor es igual a '1', solo muestra el botón de opción del grupo de radio mat donde el valor es 'A ' más mostrar todo el valor de las etapas que son 'A' y 'B'.

Como hacemos eso ? ¿Cómo ocultamos solo cierto botón del ciclo en función de un valor? Gracias.

#CAPTURA DE PANTALLA ingrese la descripción de la imagen aquí

#html

 <mat-radio-group [disabled]="!modelForm.get('schedule').value" [(ngModel)]="stage" layout="column"> <mat-radio-button *ngFor="let stage of stages" [value]="stage.text" color="primary"> {{ stage.text }} </mat-radio-button> </mat-radio-group>

#TS

 stages = [ {id: 0, text: 'A'}, {id: 1, text: 'B'}, ]
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

en lugar de `[oculto] puedes usar

 [style.display]="isHidden(stage)?'none':null"

Otra forma puede ser

 <mat-radio-group [(ngModel)]="stage" layout="column"> <!--always show the first you use "stages[0]"--> <mat-radio-button [value]="stages[0].text"> {{ stages[0].text }} </mat-radio-button> <!--the rest show or not--> <ng-container *ngIf="modelForm.get('schedule').value !== '1'"> <ng-container *ngFor="let stage of stages;let first=first"> <mat-radio-button *ngIf="!first" [value]="stage.text" color="primary"> {{ stage.text }} </mat-radio-button> </ng-container> <ng-container> </mat-radio-group>
about 4 years ago · Juan Pablo Isaza Report

0

Nota: cuando el valor de la programación se cambia a 1 , debe establecer la propiedad del stage en 'A' mediante programación para que esta solución funcione.

Puede usar la clase html para ocultar y mostrar.

apilar

 <mat-radio-group [disabled]="!formGroup.get('password').value" [(ngModel)]="stage" [ngModelOptions]="{ standalone: true }" layout="column" > <mat-radio-button *ngFor="let stage of stages" [value]="stage.text" color="primary" [ngClass]="{ isHidden: isHidden(stage) }" > {{ stage.text }} </mat-radio-button> </mat-radio-group>

estilos.css

 .isHidden { visibility: hidden; width: 0; }

t

 import { Component } from '@angular/core'; import { FormBuilder, FormGroup, FormControl, Validators, } from '@angular/forms'; import { Observable } from 'rxjs/Observable'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { formGroup: FormGroup; titleAlert: string = 'This field is required'; post: any = ''; stages = [ { id: 0, text: 'A' }, { id: 1, text: 'B' }, ]; isHidden(stage) { return ( this.formGroup.get('password').value === '1' && stage && stage.id === 1 ); }
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!