Question

如果在textarea中呈现checkbox时取消选中textarea，我该如何隐藏*ngFor？所以复选框应该与textarea绑定，对吧？它应该只隐藏用户取消选中的textarea，其他人应该保持可见。

我一直试图找出最简单的方法，但是在我的实际代码中，如果选中框，则返回true，如果没有，则返回false，但不隐藏textarea一点都没有。默认值为true，因此它将所有textarea显示为默认值。

由于某种原因，这个plnkr不允许我使用[(ngMode)]我认为它是一个不同的角度RC，但下面的例子基本上是我取消选中它不隐藏textarea的框时的问题

http://plnkr.co/edit/tOdtcmWxFB6vGuLyCqZS?p=preview

我的原始代码：

<label for="inputSearch.name" style="float: left;">
    <input  type="checkbox" id="{{inputSearch.name}}" [checked]="chkProp" (click)="chkboxCookie()" [(ngModel)]="inputSearch.value"> {{inputSearch.name}}
 </label>

<div class="" *ngFor="let inputSearch of searchBoxCount" class="col-sm-12">
    <textarea name="{{inputSearch.name}}" id="{{inputSearch.name}}" rows="3" class="search-area-txt" attr.placeholder="Search {{inputSearch.name}}"  [(ngModel)]="inputSearch.value" *ngIf="chkProp || chkProp==true || inputSearch.name"></textarea>
    <p> {{inputSearch.name}} - {{inputSearch.value}}</p>
</div>

Answer 1

使用checkedUsers数组，并设置复选框以检查数组中是否找到用户不。然后，如果在数组中找到textarea IS ，则隐藏user。

然后，在复选框change上将user传递给更改并添加用户（如果他们不在checkedUsers数组中，如果他们已经在其中，则删除它们。

PLUNKER

以下是您的组件应该是什么样子。但是，有一些警告，每个用户的name必须是唯一的，否则会向他们添加某种id属性。另外，我在JSON.stringify数组上使用checkedUsers并将其放在localStorage中，所以如果它变得很大，它会影响性能，但是你应该使用数据库。

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

@Component({
  selector: 'my-app',
    styles: [`
    .hidden {
      display: none;
    }
    `],
  template: `<p *ngFor="let user of users">{{ user.name }} - {{ user.age }} </p>

   <div *ngFor="let user of users">
      <textarea name="{{user.name}}" id="{{ user.name }}" [class.hidden]="checkedUsers.indexOf(user) >= 0"></textarea>
      <input type="checkbox" id="{{ user.name }}" [checked]="checkedUsers.indexOf(user) < 0" (click)="change(user)"/>
      <p>{{user.name}}</p>
   </div>

  `
})
export class AppComponent implements OnInit { 
  public users: string;
  public checkedUsers = [];

  constructor() {

  }

  ngOnInit() {
    this.users = [{name: 'User1', age: '21'}, {name:'User2', age:'31'}];
    this.checkedUsers = JSON.parse(localStorage.getItem("checkedUsers"));

    if(this.checkedUsers === null) {
      this.checkedUsers = [];
    } else {
      for(var i = 0; i < this.checkedUsers.length; i++) {
        var currCheckedUser = this.checkedUsers[i];
        for(var x = 0 ; x < this.users.length ; x++) {
          var currUser = this.users[x];
          if(currCheckedUser.name === currUser.name) {
            this.checkedUsers.splice(i, 1);
            this.checkedUsers.push(currUser);
          }
        }
      }
    }
  }

  change(user): void {
    var indexOfItem = this.checkedUsers.indexOf(user);
    if(indexOfItem >= 0) {
      this.checkedUsers.splice(indexOfItem, 1);
    } else {
      this.checkedUsers.push(user);
    }
    localStorage.setItem("checkedUsers",  JSON.stringify(this.checkedUsers));
  }

}

Answer 2

<input type="checkbox" id="{{ user.name }}" [checked]="chkState" (change)="chkState = !chkState" />

但是，你会遇到一个隐藏所有textareas的问题。您需要使用独特的东西来保存其各自的状态。

Answer 3

试试这段代码，它会对你有用。

选中并取消选中复选框。

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

@Component({
  selector: 'my-app',
    styles: [`
    .hidden {
      display: none;
    }
    `],
  template: `<p *ngFor="let user of users">{{ user.name }} - {{ user.age }} </p>

   <div *ngFor="let user of users">
      <textarea name="{{user.name}}" id="{{ user.name }}" [class.hidden]="chkState"> </textarea>
      <input type="checkbox" id="{{ user.name }}" [checked]="chkState" (click)="change()"/>
      <p>{{user.name}}</p>
   </div>

  `
})
export class AppComponent { 
  public users: string;
  public chkState = true;
  change(): void {
    this.chkState = !this.chkState;
  }
  constructor() {
    this.users = [{name: 'User1', age: '21'}, {name:'User2', age:'31'}];

  }
}

Here is the plunker

Angular 2隐藏文本区域，用户取消选中

3 个答案:

PLUNKER