json 数组和数字的大写管道过滤器的非常规行为

Question

更新问题：数字的大写管道过滤器没有任何意义，但它本身已经解决了这个问题，所以发布

如果我有一个包含 JSON 个对象的数组，如下所示

export class ProductListComponent {
    show: Boolean = true;
    public products: any[] = [
        {
            "name":"Person1",
            "age":30,
            "salary"": "100"
        },
        {
            "name":"Person2",
            "age":32,
            "salary"": "100"
        },
        {
            "name":"Person3",
            "age":34,
            "salary"": "100"
        }
    ]
}

在我的模板中，我将解析为

<div *ngFor = "let product of products">   
   Name : {{product.name| uppercase }} <br />
   Age :  {{product.age | uppercase }} <br />
   Salary: {{product.salary }}
</div>

<button (click) = 'show =!show'>Click to see unconventional behavior </button>
<div *ngIf='show'> Someother div to show or hide based on show value,
  but not way related to products json arry </div>

现在当页面第一次加载时输出是

Name: Person1 
Salary: 100

但是当我点击按钮时，我也看到了包含第 2 个人详细信息的页面。即

Name: Person1
Salary: 100
Name:  Person2 
Salary: 100

当我再次点击按钮时，我也看到了包含第 3 个人详细信息的页面。即

Name: Person1 
Salary: 100
Name: Person2
Salary: 100
Name: Person3 
Salary: 100

点击按钮不应该与 JSON 对象渲染无关吗？

Answer 1

你有逻辑问题（不是语法问题）。您不能将 uppercase 竖线应用于数字 (age)。这将导致您的模板出现异常。在未处理的异常之后发生的任何 behavior/execution 都是不可预测的。从 age 移除管道，一切正常。

Plunk

下次我建议您打开浏览器控制台（调试工具），您可以在其中查看是否发出任何错误。在这种情况下，您会看到：

ERROR Error: InvalidPipeArgument: '32' for pipe 'UpperCasePipe'

json 数组和数字的大写管道过滤器的非常规行为

Unconventional behavior with json array and an upppercase pipe filter for a number

angular-pipe

angular