Отображать "-", если значение пустое?

Ответ 1

Ваш пример должен работать, но если у вас есть пробел или функция в o.Name, он не будет разрешен falsey и вы получите невидимое пространство в HTML а не желаемую тире.

Общий фильтр можно использовать для замены пустых значений для тире и сначала применить различную нормализацию на входе:

angular.module('App.filters', []).filter('placeholder', [function () {
    return function (text, placeholder) {
        // If we're dealing with a function, get the value
        if (angular.isFunction(text)) text = text();
        // Trim any whitespace and show placeholder if no content
        return text.trim() || placeholder;
    };
}]);

Затем вы можете использовать его следующим образом:

<th ng-repeat=" o in Odds" >{{o.Name | placeholder:'-'}}</th>

Затем это можно полностью повторно использовать для других строк/столбцов и в любом другом месте, где вы хотите применить одно и то же правило.

Пример: http://jsfiddle.net/kfknbsp7/4/

Ответ 2

В этом случае вы можете использовать ngIf следующим образом:

   <th ng-repeat=" o in Odds" >
        <span ng-if="o.Name">{{o.Name}}</span>        
        <span ng-if="!o.Name"> - </span>
   </th>

Ответ 3

У вас может быть что-то, использующее ngIf, если это не работает

<th ng-repeat="o in Odds">
    <span ng-if="o.Name">{{o.Name}}</span>
    <span ng-if="!o.Name">-</span>
</th>

Ответ 4

Создать notapplicable.pipe.ts

@Pipe({name: 'NA'})

export class Notapplicable implements PipeTransform {
  transform(value: string): string {
    let newStr: string = "";
    if(value=='')
    {
        newStr="NA";
    }
    else{
        newStr=value;
    }
    return newStr;
  }
}

Включить это в модуль приложения

import { Notapplicable } from './notapplicable.pipe.ts';

declarations: [
    AppComponent,
    Notapplicable
  ],....

И использовать это таким образом в файле HTML

<tr *ngFor="let article of articledata">
            <td>{{article.a | NA}}</td>
            <td>{{article.b | NA}}</td>
            <td>{{article.c | NA}}</td>
            <td>{{article.d | NA}}</td>
</tr>

Таким образом, вы можете отобразить NA, если строка пуста

Ответ 5

Если в Aungular 5 вы можете использовать что-то подобное внутри ng для.

Преимущество этого заключается в том, что если у вас есть несколько записей, которые вы хотели бы показать: если в записях есть то, что у вас есть, если нет, отображается "Нет данных". тогда вам нужно всего лишь написать один ng-шаблон.

 <td ng-if="o.Name; else showNA">{{ o.Name }}</td>
 <td ng-if="o.Address; else showNA">{{ o.Address }}</td>
 <td ng-if="o.Phone; else showNA">{{ o.Phone }}</td>

<ng-template #showNA>
<td>-</td>
</ng-template>