如何在 Angular 中绑定多个插值模板？

Posted 2023-03-13

【中文标题】如何在 Angular 中绑定多个插值模板？

【英文标题】：How to bind multi Interpolation templates in Angular?

【发布时间】：2019-01-26 15:13:18

【问题描述】：

我有想要显示的JSON 数据。我创建了一些函数来从中获取特定数据（我找不到更好的方法）。

我也在尝试按顺序显示它们。

例如：第一个函数返回第一个项目的数组，第二个函数，第二个项目。然后我想按顺序显示它们。首先，我尝试直接从 JSON 执行此操作，但遇到了一些问题，因为它可能嵌套在数组或对象中，因此我无法直接执行。

所以，我正在尝试做这样的事情：

    <div class="head">
  <span class="text">
     head.text 
  </span>

  <span class="sub">
       head.sub.value 
    </span>

    <span class="text">
         head.place 
      </span>
</div>

<!-- for each body render the rest nested items... -->
<div class="body">  
  <span class="info">
     body.id 
     body.info 
  </span>
  <div class="extended">
    <span class="text">
       extenden.spl.text 
    </span>

    <span class="type.value">
         extenden.spl.type.value 
    </span>
  </div>
</div>

这是json的基本结构：

[
    "id": "XXX",
    "version": 1,
    "head": 
        "text": "Main title",
        "sub": 
            "value": "next"
        ,
        "place": "secondary"
    ,
    "body": [
            "id": "XXX1",
            "info": "three little birds",
            "extended": 
                "spl": 
                    "text": "song",
                    "type": 
                        "value": "a"
                    
                
            
        ,
        
            "id": "XXX2",
            "info": [
                "how are you?"
            ],
            "extended": 
                "spl": 
                    "text": "just",
                    "non-type": 
                        "value": "abc"
                    
                
            
        
    ]
]

还有最重要的！

如果我可以假设 JSON 属性，我知道该怎么做！ 我的问题是我不知道它是否会是一个数组或对象或对象数组，所以

<div *ngFor='let item of items'> item </div>

不适合我！

【问题讨论】：

你不能用*ngFor="let user of result.users"然后user.firstNameuser.lastName这样的东西吗？

你应该提供你的函数代码，也许你的data$模型

不，因为它们是不同的对象

那么你能分享一下你的对象结构吗？

是的。更新

【参考方案1】：

您需要尝试不同的方法。您需要循环用户对象而不是“用户的属性”。

 <span class="headwordText" *ngFor="let user of users">
             user.first ,  user.last 
  </span>

【讨论】：

不，它不起作用，因为有时'users'属性是一个对象，有时是一个数组

如果它是一个对象，你可以说它是一个包含1个对象的数组。所以在你的 TS 文件中尝试使它总是返回一个数组。或者，您可以检查它是模板内的对象还是数组（不太推荐）

这是我的主要问题。我不知道 json 响应是一个对象还是一个对象数组。我找不到正确的方法。我用 JSON 结构编辑了帖子

【参考方案2】：

你的问题不是很清楚，但如果我理解正确，这就是解决方案

在你的 ts 文件中：

public fristnames : string[];
public lastnames : string[];

OnInit()

    firstnames = headwordFirst();
    lastnames =  headwordLast();

现在在您的 html 文件中：

<div class="headwordDiv">
    <span class="headwordText" *ngFor="let firstname of firstnames ;let i = index">
         firstname   lastnames[i] 
    </span>
</div>

希望对你有帮助

【参考方案3】：

Angular 是一个不会影响样式或布局的分组元素，因为 Angular 不会将其放入 DOM。

<div *ngFor="let d of demo; let i = index">
  <span class="text">
      d.head.text 
  </span>
  <span class="sub">
       d.head.sub.value 
    </span>

    <span class="text">
         d.head.place 
      </span>
<ng-container *ngFor="let body of d.body">

  <span class="info">
     body.id 
     body.info 
  </span>
    <span class="text">
       body.extended.spl.text 
    </span>
    <span class="type.value">
         body.extendend.spl.type.value 
    </span>
</ng-container>
</div>

【讨论】：

嘿，感谢您的评论，但正如我上面所说，我知道如何呈现这样的数据。问题是，例如： d.head.place head 属性是一个对象，有时是一个数组。

使用另一个 ng-container 重复数组