Удалить innerHTML из директивы Angular - PullRequest
Новая
       35

Удалить innerHTML из директивы Angular

0 голосов
/ 20 июня 2019

У меня есть такая директива 

import { Directive, ElementRef, Input, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Directive({
    selector: '[appNoValuesFound]'
})
export class NoValuesFoundDirective implements OnInit {
    @Input() initValues: any = null;
    @Input() displayText: any = this.translate.instant('NoValuesFound');
    @Input() columns = 3;

    get haveValues(): boolean {
        if (this.initValues) {
            return this.initValues || this.initValues.length > 0;
        } else {
            return false;
        }
    }

    constructor(private el: ElementRef, private translate: TranslateService) { }

    ngOnInit() {
        if (!this.haveValues) {
            this.el.nativeElement.innerHTML = '<tr><td colspan="' + this.columns + '">' + this.displayText + '</td></tr>';
        }
    }
}

И HTML, как это 

<tbody appNoValuesFound [initValues]="values" [displayText]="'Nothing to diplay'" [columns]="3">
    <tr>
      <td colspan="3">
    values
      </td>
</tbody>

Директива заменит innerHtML, если значения пусты. Единственная проблема в том, что у меня есть то, что, если мне нужно что-то сделать со значениями, такими как pipe, и значения не определены, это покажет мне ошибку в консоли. Мне нужно как-то из директивы предотвратить HTML-рендеринг innerHTML в значениях, пустых, и заменить на мой innerHTML

...