Как использовать * ngIf в * ngFor в Angular 7?
У меня есть несколько элементов в моем документе DocumentModel, которые я хочу показать, за исключением «содержимого». Я уже пытался исключить его, проверив имя элемента, но он все равно его показывает:
<p *ngFor = "let item of (document | keyvalue)">
<b *ngIf = "item.key != 'content'">{{item.key}}:</b> {{item.value}}
</p>
Я также пробовал использовать контент без ", который тоже не работает.
Как я могу сделать что-то вроде if (!key.equals("content")) на Java?
Модель документа
export class DocumentModel
{
messageType: string;
content: string;
failed: boolean;
string1: string;
string2: string;
}
Спасибо, но это все еще не объясняет, почему * ngIf не работает.
@karottenbunker какой у вас тип документа?
@karottenbunker следует примеру из официальной документации angular, работает следующий пример. stackblitz. Было бы полезно, если бы вы могли поделиться моделью данных, которые вы используете. Вы уверены, что в структуре данных присутствует «контент»?
Это если заявление выглядит хорошо. Вы уверены, что это действительно content? Может быть, в нем есть особый символ или где-то пробел.
Это моя DocumentModel: export class DocumentModel { messageType: string; content: string; failed: boolean; string1: string; string2: string; }
Я обновил пример с помощью предоставленной вами модели, и он работает должным образом: (stackblitz) [stackblitz.com/edit/angular-tndqqz]. Вы должны знать, что он разделит ваш объект на prop / value. Таким образом, не будет отображаться только свойство с именем content, будет отображаться фактическое значение, которое ему присвоено.
@ RafałCzabaj спасибо, что сделали это!
Ответы 2
You can create pipe to access key
import { PipeTransform, Pipe } from '@angular/core';
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform {
transform(value, args:string[]) : any {
let keys = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
}
html:
<span *ngFor = "let item of content | keys">
<b *ngIf = "item.key != 'content'">{{item.key}}:</b> {{item.value}}
</span>
Или
Написать фильтр для данных содержимого из списка.
Вот ваш исходный код:
<p *ngFor = "let item of (document | keyvalue)">
<b *ngIf = "item.key != 'content'">{{item.key}}:</b> {{item.value}}
</p>
Но если я посмотрю на *ngFor, мне покажется, что это может быть document или keyvalue. Итак, мой вопрос:
Вы уверены, что document и keyvalue имеют поле key?
Эй, ключевое значение - это трубка. См. это
Вы должны отфильтровать массив с помощью геттера внутри вашего файла TS. Таким образом, вам вообще не нужно использовать * ngIf внутри файла шаблона. Другой вариант - использовать конвейер для фильтрации массива.