从指令Angular

Question

我有这样的指令

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。唯一的问题是，如果我需要对值（例如管道）进行某些操作，并且值未定义，它将在控制台中显示错误。我需要从指令中以某种方式防止值中的innerHTML的html呈现为空，并替换为我的innerHTML