当值为空时如何返回“-”？

Question

当字段没有值时，我希望它显示 - 而不是空字段。 我为此准备了一个管道，它将空值替换为 - 。 如果传入的值只是一个字符串，则该函数可以正常工作。

我遇到一个问题，对象内部有两个值（也是字符串类型），但我的算法不知何故无法正确解释我想要实现的目标。具体来说，一个具有两个空字段的对象进入，算法会在那里插入两个 - 字符，而我只想将一个 - 字符插入到该字段中。

对于常规字符串，它的工作原理如下：

<dd class="col-sm-8">{{ profile.type | insertHyphen}}</dd>

Output:
Type: -

对于一个对象来说，它的行为是这样的：

<normalized-value [value2]="profile.street | insertHyphen"></normalized-value>

Output:
Street: -
        -

如您所见，它在这里插入两个破折号，一个表示原始破折号，另一个表示标准化破折号，但我希望它只插入一个。所以在某个地方我遇到了错误，但我不太确定我做错了什么，因为它应该检查 street 是否有值。如果有，则应显示它，如果没有，则应插入破折号。但是，街道值采用具有两个值的 NormalizedValue 对象，但我无法处理它。我不想改变对象本身，只是更正算法，以便它正确解释需要做什么。

export class insertHyphenPipe implements PipeTransform {
    transform(value: string | NormalizedValue | null | undefined): NormalizedValue | string {
        if (typeof value === 'string') {
            return value ? value : '-';
        } else if (value && typeof value === 'object') {
            if (!value.raw && !value.normalized) {
                return '-';
            } else {
                return value.raw ? value.raw : value.normalized;
            }
        } else {
            return '-';
        }
    }
}

export interface NormalizedValue {
    raw: string;
    normalized?: string;
}

export class NormalizedValueComponent {
    raw?: string;
    normalized?: string;

    @Input() set value(value: NormalizedValue | undefined) {
        this.raw = value?.raw;
        this.normalized = value?.normalized;
    }

    @Input() set value2(value: NormalizedValue | string) {
        if (typeof value === 'string') {
            this.raw = value;
            this.normalized = value;
        }
    }
}

Answer 1

事情发生是因为这样：

@Input() set value2(value: NormalizedValue | string) {
        if (typeof value === 'string') {
            this.raw = value;
            this.normalized = value;
        }
    }

您将已转换的值作为输入传递给组件。这意味着您传递“-”作为输入，并将其分配给原始和标准化