Question

我正在使用Angular 7

我有以下模板

odoo.define('budget_management.graph', function(require){
"use strict";
var WebClient = require('web.nv.d3');
var Model = require('web.Model');
var utils = require('web.utils');
WebClient.contentGenerator.include({
trowEnter.append("td")
    .classed("value",true)
    .html(function(p, i) {
var myval = valueFormatter(p.value, i)
//alert(myval)
return myval+'%'
});

var html = table.node().outerHTML;
if (d.footer !== undefined)
    html += "<div class='footer'>" + d.footer + "</div>";
return html;
});
});

我想通过代替<template id="assets_backend" name="extend_web_nvd3js assets" inherit_id="web.assets_backend"> <xpath expr="." position="inside"> <script type="text/javascript" src="/budget_management/static/src/js/inherit.nv.d3.js"></script> </xpath> </template>代替<div> {{myService.userInfo.firstName}} {{myService.userInfo.lastName}} </div>来简短一些

user

我该如何像AngularJS中的ng-init一样。

Answer 1

创建一个getter属性，该属性将返回userinfo对象

 get user(){
      return this.myService.userInfo;
 }

并使用

<div>
   {{user.firstName}} {{user.lastName}}
</div>

Answer 2

是的，您可以在NgIf或NgForOf的帮助下完成此操作。

解决方案：

因此，您的情况将是：

<div *ngIf="myService.userInfo as user">
  {{user.firstName}} {{user.lastName}}
</div>

Angular文档以供参考：
https://angular.io/api/common/NgIf#storing-conditional-result-in-a-variable https://angular.io/api/common/NgForOf#local-variables

Answer 3

如果要使用自定义管道，可以执行以下操作

@Pipe({name: 'namePipe'})
export class NamePipe implements PipeTransform {
  transform(value: any, prop: string): string {
     return value.userInfo[prop];
  }
}

<div>
    {{myService | namePipe:'firstName'}} {{myService | namePipe:'lastName'}}
</div>

但是到那时，您还没有在html中节省任何空间。您可以制作两个管道，并像这样引用它们：

@Pipe({name: 'firstName'})
export class FirstNamePipe implements PipeTransform {
  transform(value: any): string {
     return value.userInfo.firstName;
  }
}

@Pipe({name: 'lastName'})
...

<div>
    {{myService | firstName}} {{myService | lastName}}
</div>

但是，如果这是您引用它们的唯一位置，那么这确实不值得。您可以设置变量let user = this.myService.userInfo，但这很丑陋，如果有更改，则必须手动更新。也许您可以将信息传递给子组件（如果想查看示例，请询问）并以这种方式访问字段，但是您提供的代码很少，我不知道什么是最适合您的用例的。但是我认为除了给出其他答案外，没有其他方法可以达到您想要的目的。

如何在Angular表达式中使用别名？

3 个答案:

解决方案：