Question

我有一个这样的清单：

<ion-list>
    <ion-item *ngFor="let user of users">
      {{ user.name }}
    </ion-item>
</ion-list>

如果单击某个元素，我想添加一些样式（例如边框）。

我也希望一次只能选择一个项目并选择该边框。

我该怎么做？

Answer 1

您可以使用属性来保存所选项目;这样，只有一个项目可以标记为已选中。请看this working plunker。

<强>组件

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

export class User {
  public id: number;
  public name: string;

  constructor(id: number, name: string) {
    this.id = id;
    this.name = name;
  }
}

@Component({
  selector: 'page-home',
  templateUrl: 'app/home.page.html',
  styles: [`
    .active {
      background-color: antiquewhite;
    }
  `]
})
export class HomePage {

  public users: Array<User>;
  public selectedUser: User;

  constructor(public navController: NavController) {
    this.users = [];
    this.users.push(new User(1, 'User 1'));
    this.users.push(new User(2, 'User 2'));
    this.users.push(new User(3, 'User 3'));
    this.users.push(new User(4, 'User 4'));
    this.users.push(new User(5, 'User 5'));

    this.selectedUser = this.users[0];
  }

  public checkActiveUser(user: User): boolean {
    return user.id === this.selectedUser.id;
  }

  public selectUser(user: User): void {
    this.selectedUser = user;
  }

}

查看

<ion-header> <ion-navbar> <ion-title>Ionic App</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list no-lines> <ion-item (click)="selectUser(user)" [class.active]="checkActiveUser(user)" *ngFor="let user of users"> {{ user.name }} </ion-item> </ion-list> </ion-content>

所以基本上我们有一个users列表（我们用来创建所有项目的列表），我们也可以在我们的组件中有一个名为selectedUser的属性，我们可以在其中分配当前属性选定的用户（或默认的用户列表的第一个用户）。我们需要额外的属性才能知道我们需要强调哪一个。通过使用单个属性，be也可以只允许一个用户突出显示。

一旦我们有users就绪列表和一个selectedUser属性（列表的用户之一），我们只需要在代表所选项目的项目中添加一个类用户。为此，我们在项目中添加：

[class.active]="checkActiveUser(user)"

checkActiveUser(...)方法接收用户并使用其id来检查该用户是否是selectedUser属性的同一用户。这样，active类将仅添加到代表我们选择的用户的项目中。

唯一剩下的就是在active类中添加一些样式来突出显示该项目。

Answer 2

使用如下：

<div class="leftContainer" [ngStyle]="{'width':item.selected?'50%':'100%'}"></div>

您可以通过逗号分隔添加多个css ：

<div *ngIf="item.selected" class="rightContainer" [ngStyle]="{'height':sharedData.TabHeight-2 + 'px','width':reportModel.IsEditMode?'50%':'100%'}"></div>

注意：根据您的要求逻辑使用您的条件

ionic2和angular2列表元素样式取决于条件

2 个答案: