ngFor на основе типа

сейчас он печатает два раза нет данных. Я просто хочу заменить третий без данных, так как тип 3 не существует в массиве.

Так что мое состояние когда-нибудь я получаю массив с типом 3 или тип 2 или тип 1 если массив не имеет типа 3, типа 2 или типа 1, просто печатайте только один раз.

На самом деле я не получаю способ сделать :(

stackblitz: https://stackblitz.com/edit/angular-r85hhs?file=src%2Fapp%2Fapp.component.html

app.component.html


 
   
{{item.name}}


{{item.name}}


{{item.name}}

NO data

app.component.ts

  public test = [{type:1, name:'shawn'},
   {type:2, name:"ronny"}
  ]

enter image description here Thank you

0
Сколько существует типов ? Можете ли вы предоставить желаемый результат по вашему вопросу.
добавлено автор penleychan, источник
Чтобы уточнить, вы хотите, чтобы вывод был: Шон Ронни НЕТ данных ?
добавлено автор Wrokar, источник
да wroker, предположим, я получаю новый массив, который не имеет тип 2, то в этом случае я хочу напечатать этот шон без данных indra
добавлено автор Indraraj26, источник

2 ответы

Обновление к этому



Start editing to see some magic happen :)


<div *ngIf="test?.length > 0">
  
    
      
{{ item.name }}
{{ item.name }}
{{ item.name }} </div> <div> NO data </div>
0
добавлено
На самом деле это не будет работать, так как элемент находится вне области видимости, вы не используете ng-container внутри цикла
добавлено автор Indraraj26, источник

Вы, вероятно, хотите использовать ngSwitch . В этом примере, когда item.type не равно 1, 2 или 3, по умолчанию будет отображаться No DATA .


  
    
{{item.name}}


{{item.name}}


{{item.name}}


No DATA

0
добавлено
я не получаю никаких данных я не знаю почему
добавлено автор Indraraj26, источник
Angular — русскоговорящее сообщество
Angular — русскоговорящее сообщество
3 960 участник(ов)

Общаемся на темы Angular 4+, его экосистемы, TypeScript, NativeScript и т.д. По вопросам SSR, Angular Universal @angular_universal_ru См. также: @typescript_ru, @react_js, @nodejs_ru, @js_ru Вакансии и поиск работы: @javascript_jobs