Question

我正在开发一个应用程序来显示不同环境中所有应用程序的内部版本号。

我必须编写自定义管道才能从我的数据模型中提取构建号。

以下是数据模型的精简版：

[  
   {  
      "Name":"BP",
      "Environments":[  
         {  
            "Name":"DEV",
            "URL":"redacted",
            "Build":"20160315.1\r\n"
         },
         {  
            "Name":"QA",
            "URL":"redacted",
            "Build":"20160311.3\r\n"
         }
      ]
   }
]

以下是我计划渲染数据以及使用管道的方法：

<tr *ngFor="#app of apps">
    <td>{{app.Name}}</td>
    <td>{{app.Environments | build:"DEV"}}</td>
    <td>{{app.Environments | build:"QA"}}</td>
    <td>{{app.Environments | build:"UAT"}}</td>
    <td>{{app.Environments | build:"PROD"}}</td>
</tr>

如您所见，我将每个应用程序的Environments数组发送到管道中，并将字符串environmentName作为参数发送。

我的烟斗看起来像这样：

export class BuildPipe implements PipeTransform {
    transform(value: Array<Environment>, args: string[]) : any {
        jQuery.grep(value, (b) => {
            if (b.Name===args[0]) {
                return b.Build;
            }

        })
    }
}

看起来它会完美运作。当环境名称与参数匹配时，它返回b.Build，但它没有显示在我的模板中。我错过了什么？

Answer 1

return

之前缺少jQuery

export class BuildPipe implements PipeTransform {
    transform(value: Array<Environment>, args: string[]) : any {
        return jQuery.grep(value, (b) => {
            if (b.Name===args[0]) {
                return b.Build;
            }

        })
    }
}

return b.Build;只返回传递给jQuery.grep(...)但不是transform的回调

export class BuildPipe implements PipeTransform {
    transform(value: Array<Environment>, args: string[]) : any {
        var filtered = value.filter((val) {
            return val.Name===args[0]
        });
        if(filtered.length) {
            return filtered[0]
        }
    }
}

Angular 2 Pipe不会将数据返回给Template

1 个答案: