Angular 4 - 如果ngModel不为空，则添加类

Question

如果我为select元素定义的ngModel不为空，如何在页面上的元素中添加一个类。目前有这个..

<md-select placeholder="Location" name="location" [(ngModel)]="selectedLocation">
      <md-option *ngFor="let option of locationOptions" [value]="option.value">
        {{option.viewValue}}
      </md-option>
    </md-select>

如果ngModel不为空，想在span元素中添加一个类，就像这样......

<p>Location:<span ng-class="{'complete': selectedLocation.length > 0}">{{ selectedLocation }}</span></p>

Answer 1

使用[ngClass]

为example from docs

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

Answer 2

需要在括号之间绑定到您的变量。您的ng-class属性也是错误的，它必须是ngClass

<p>Location:<span [ngClass]="{'complete': selectedLocation.length > 0}">{{ selectedLocation }}</span></p>

Answer 3

我不知道angular4但是在角度1中它是这样的。

<div ng-class="{'myClass':myModel}"></div>

Answer 4

这里有一个使用[class]的案例，因为你只有一个类适用：

<p>Location:<span [class.complete]="selectedLocation.length > 0">{{ selectedLocation }}</span></p>

我认为要短得多。