Question

在我要显示的Angular 7模板上：

{{addressLocality}}, {{addressCountry}}

因此，如果两者都不为null，则变为：

New York, USA

其中之一或两者都可能为null，这对于逗号没有意义。

当其中一个为null时，是否有一种简短的方法来删除逗号？

我正在查看items.join(", ")，但在这种情况下，我有2个变量而不是列表。

Answer 1

使用吸气剂：

get phrase() {
  return [this.addressLocality, this.addressCountry]
    .filter(val => !!val)
    .join(', ');
}

通过

显示

{{ phrase }}

Answer 2

我最终创建了一个解决问题的管道（可能对其他人有用）

sVaultPath = "E:\\New folder";
            sdtSearchAppPath = "C:\\Program Files (x86)\\dtSearch Developer\\bin\\dtSearchNetApi2.dll";
            sIndexPath = "E:\\indexing";
            dtSearchAssembly = Assembly.LoadFrom(sdtSearchAppPath);
            dtIndexJob = dtSearchAssembly.CreateInstance("dtSearch.Engine.IndexJob");


            string name = "DataSource";
            string property = "DataSource";
            string value = "Baz";

            // Get the type contained in the name string



           // object ob 
                Type type= dtSearchAssembly.GetType("dtSearch.Engine.DataSource");
            //type = typeof()

            PropertyInfo[] propInfos
                = type.GetProperties(BindingFlags.Instance
                    | BindingFlags.Public
                    | BindingFlags.DeclaredOnly);


           // PropertyInfo prop = type.GetProperty(property);

            // Set the value of the given property on the given instance
            //prop.SetValue(instance, value, null);


           // dataSource = dtSearchAssembly.CreateInstance(prop.GetType().FullName);
            dataSource.Folder = sVaultPath;
            if (!dataSource.Rewind())
            {
                iRet = 0;
                return iRet;
            }


            dtIndexJob.ActionCreate = true;
            dtIndexJob.ActionAdd = true;
            dtIndexJob.IndexPath = sIndexPath;
            dtIndexJob.StoredFields = new System.Collections.Specialized.StringCollection();
            dtIndexJob.StoredFields.Add("*");
            dtIndexJob.DataSourceToIndex = dataSource;

在我的问题中可以如下使用：

import { Pipe, PipeTransform  } from '@angular/core';

@Pipe({ name: 'join' })

export class JoinPipe implements PipeTransform {

  transform (value: any, character: string = ', '): any {

    if (!Array.isArray(value)) 
      return value;

    return value.filter(x => !!x).join(character);

  }

}

默认情况下，管道使用{{ [addressLocality, addressCountry] | join }}按照@trichetriche的建议从数组中删除空值。

但这也可以是管道的输入，例如，从数组中删除或不为null。

Answer 3

您可以如下所示使用，形成变量数组，检查它们是否不为null，然后与'，'合并。

get addressStr(): string {
  return [this.addressLocality, this.addressCountry].filter(Boolean).join(", ");
}

并在模板中使用{{addressStr}}。

在Angular模板中有条件地渲染逗号

3 个答案: