ionic2並根據條件

Question

angular2列表元素的風格我有一個這樣的名單：

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

我想（約例如邊框）添加一些風格的元素，如果被點擊。

我也希望一次只能選擇一個項目，並用該邊框標記。

我該怎麼做？

Answer 1

你可以通過使用一個屬性來實現這一點e選定的項目;這樣，只有一個項目可以被標記爲選中。請看看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，我們可以將當前選定的用戶（或用戶列表的第一個用戶）分配爲默認用戶。我們需要額外的財產來知道我們需要突出哪一個。通過使用單個屬性，也可以僅允許一個用戶突出顯示。

一旦我們準備好了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> 

注：使用條件按您的要求邏輯