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

但是当我点击按钮时，我也会得到包含Person 2细节的页面。即。

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

当我再次点击按钮时，我也会看到包含Person 3细节的页面。即。

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

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

Answer 1

你有一个逻辑问题（不是语法）。您无法将uppercase管道应用于数字（age）。这将导致模板中出现异常。在未处理的异常之后发生的任何行为/执行都是不可预测的。从age中删除管道，一切正常。

Plunk

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

ERROR错误：InvalidPipeArgument：管道'UpperCasePipe'的'32'

json数组的非常规行为和数字

1 个答案: