У меня есть список флажков, и есть определенный вводимый текст, который я хочу отображать только рядом с установленным флажком. В AngularJs это очень просто. В угловом это кажется невозможным. Я видел этот вопрос с множеством ответов, ни один из них не работал! Может ли кто-нибудь дать мне простое рабочее решение?

Спасибо, Оснат.

Вот мой код:

<tr *ngFor="let eachService of services; let i = index">
     <td class="service-td" *ngIf="services[i]"><input type="checkbox">
          <span>{{services[i]}}</span>
     </td>
     <input [hidden]="???" type="text" value="wl">
</tr>

0
Osnat 25 Ноя 2019 в 11:21
Добавьте образцы данных для services
 – 
Joel Joseph
25 Ноя 2019 в 11:42
Услуги - это просто массив строк
 – 
Osnat
25 Ноя 2019 в 11:45
Пожалуйста, проверьте мой обновленный ответ
 – 
Joel Joseph
25 Ноя 2019 в 13:04
Сработал ли для вас какой-либо ответ? Если да, подумайте о том, чтобы принять / проголосовать за них. Что мне делать, когда кто-то отвечает на мой вопрос?
 – 
Nicholas K
27 Ноя 2019 в 14:28
Как я писал в вашем ответе, он отлично подходит для переключателей, но не для флажков.
 – 
Osnat
28 Ноя 2019 в 15:03

4 ответа

Он использует только [(ngModel)] и переменную. Если вы перебираете массив объектов, просто добавляете новое свойство, «проверенное», к вашему объекту. Вы можете сделать это "на лету"

Представьте, что ваши «услуги» - это массив объектов.

[{name:"Service1",value:"some value"},{name:"service2",value:"some value"}]

<tr *ngFor="let eachService of services; let i = index">
     <td class="service-td">
          <input type="checkbox" [(ngModel)]="eachService.checked">
          <span>{{eachService.name}}</span>
     </td>
     <input [hidden]="!eachService.checked" type="text" [(ngModel)]="eachService.Value">
</tr>

Ну, но у вас нет массива объектов, у вас есть массив строк, на самом деле два массива строк (один для отображения службы, а другой для хранения значений. Ну, создайте новый массив логических значений, чтобы отображать или нет входы

checks:boolean[]=[]
values:string[]=[]
services:string[]=["service1","service2"]

<tr *ngFor="let eachService of services; let i = index">
     <td class="service-td">
          <input type="checkbox" [(ngModel)]="checks[i]">
          <span>{{eachService}}</span>
     </td>
     <input [hidden]="!checks[i]" type="text" [(ngModel)]="values[i]">
</tr>

ПРИМЕЧАНИЕ. В этом случае не забудьте, перед отправкой данных проверьте, верны ли "проверки".

this.values=this.values.filter((x,index)=>this.checks[index])
0
Eliseo 25 Ноя 2019 в 12:15

Вы можете сделать следующее, вот рабочая демонстрация: https://stackblitz.com/edit/angular- apfdfa:

component.ts

  selectedValue = '';
  services = ['service 1','service 2', 'service 3'];
  checked($val){
    this.selectedValue = $val;
  }

component.html

<tr *ngFor="let eachService  of services; let i = index">
     <td class="service-td" *ngIf="services[i]">
       <input (change)="checked(eachService)" [checked]="selectedValue == eachService" type="checkbox" [value]="eachService">
          <span>{{eachService}}</span>
     </td>
     <input [hidden]="!(selectedValue === eachService)" type="text" [value]="eachService">
</tr>
0
Joel Joseph 25 Ноя 2019 в 12:28
Обновлен рабочей демонстрацией
 – 
Joel Joseph
25 Ноя 2019 в 12:28
Спасибо! ваше решение отлично подходит для переключателя, но мне оно нужно для флажка, можно проверить более одного элемента, а вводимый текст должен исчезнуть, когда элемент не отмечен
 – 
Osnat
25 Ноя 2019 в 14:04

Я не уверен, что именно вы хотите, но думаю, вам может понадобиться что-то вроде этого.

componet.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  services = [{key: "a"},{key: "b"},{key: "c"},{key: "d"}];
}

component.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<tr *ngFor="let eachService of services;">
     <td class="service-td">
       <input [(ngModel)]="eachService.checked" type="checkbox" #p > <span>{{eachService.key}}</span>
       <span *ngIf="eachService.checked">
         <input type="text" placeholder="{{eachService.key}} is selected">
       </span>
     </td>
</tr>
<br>
<br>

{{services | json}}

https://stackblitz.com/edit/angular-lr3fat

0
Nimatullah Razmjo 25 Ноя 2019 в 12:36
Он не распознает поле "checked" в объекте eachService.
 – 
Osnat
25 Ноя 2019 в 13:59

Для нескольких флажков и отображения только соответствующего div могут быть разные способы отслеживания.

А. Отслеживание индекса и сохранение в массиве с отображением только проверенного индекса.

Б. angular уже предоставляет @ViewChildren для отслеживания элементов.

C. Вы даже можете создать карту с ключом в качестве идентификатора и логическим значением для отображения или скрытия элементов. И можете переключаться с помощью карты.

Пример использования @ViewChildren: -

<tr *ngFor="let eachService of services; let i = index">
                <td class="service-td"><input type="checkbox" 
(change)="toggle($event,i)">  
                     <span>{{services[i]}}</span> 
                </td>
                <input  [id]="i" style="display: none;"   type="text" 
 [value]="services[i]" #help>
           </tr>

Ts файл: -

@ViewChildren('help') help :any[]; // declare it.


toggle(event,j){
this.help.forEach((ele: ElementRef) => {
  if(ele.nativeElement.id == j && event.target.checked){
    ele.nativeElement.style.display='block';                  
  }else if(ele.nativeElement.id == j && !event.target.checked){
    ele.nativeElement.style.display='none';
  } 

});
}
0
Himanshu Sharma 25 Ноя 2019 в 15:03
@ViewChildren ('помощь') help: any []; не компилируется
 – 
Osnat
25 Ноя 2019 в 14:55
В чем ошибка? убедитесь, что вы импортируете @ViewChildren из '@ angular / core' и #help был определен в шаблоне
 – 
Himanshu Sharma
25 Ноя 2019 в 15:02