html中的变量，角度答案

【问题标题】：Variable in html ,angularhtml中的变量，角度
【发布时间】：2021-07-30 00:06:22
【问题描述】：

我正在开发一个有角度的应用程序，在一个 html 文件中我有这样的东西

<div *ngFor="let var of list">
  <div>
     {{newVar.name}}
   <div>
</div>

我的问题是我不知道如何在 div 中正确声明 newVar，因为我希望 newVar 是从以第一个 var 作为参数的组件中的函数返回的结果

所以我基本上想要类似的东西

newVar=func(var)

在使用 name 属性之前，我不知道该怎么做

我可以做 func(var).name 但我不只显示名称，所以我不想多次调用该函数

【问题讨论】：

您希望您的函数填充 newVar 而不是 newVar 成为您的函数。何时调用函数取决于您希望何时填充此函数
我希望函数在显示之前填充 newvar 是的
而不是在html中循环，为什么不在TS中循环并为每个var动态生成div
这不是我的代码，我只是添加一个

标签： html angular typescript

【解决方案1】：

因此，您的解决方法类似于，在 html 中流式传输 list 并将 var 传递给打字稿函数 func(var) 将结果存储在 newVar 中。从那里你想在 UI 中显示 name 值。我的理解是否正确，我的建议是

ts

newVar = [];
///
func() {
  list.forEach(element=>{
    newVar.push(element);
  });
}

html

<div *ngFor="let var of newVar">
  <div>
     {{var.name}}
   <div>
</div>

【讨论】：

【解决方案2】：

目前没有任何直接的解决方案。一种解决方法是使用 *ngFor 作为 hack（成本就是性能）

<div *ngFor="let _var of list">
  <div *ngFor="let newVar of [func(_var)]">
    {{newVar.name}}
  </div>
</div>

【讨论】：

由于列表基本上只有一个元素，它有多慢？
Angular 每次var 更改时都必须重新渲染整个 div（由于其更改检测机制），并且重新渲染成本很高
附带说明，建议您将var 重命名为其他名称，因为var 是javascript/typescript 的关键字
它被命名为别的东西，只是举例

【解决方案3】：

你有几个选择：

<div *ngFor="let var of list">
    {{func(var).name}}
</div>

使用辅助数组

//in your .ts
auxArray:any[]=[];

this.auxArray=this.list.map(x=>this.func(x))

//and iterate over auxArray
    <div *ngFor="let var of auxArray">
        {{var.name}}
    </div> 

 //or iterate over list and use "index"
    <div *ngFor="let var of list;let i=index">
        {{var}} = {{auxArray[i].name}}
    </div>

如果你的列表是一个对象数组，你也可以

//in your .ts
this.list.forEach(x=>{
   data:this.func(x)
}

//and iterate over list but use data.name
    <div *ngFor="let var of list">
        {{var.data.name}}
    </div>

第一个选项效率低，因为 Angular 多次执行该函数 - 每次检查应用程序，您可以查看是否在函数中使用 console.log(var)

【讨论】：

【解决方案4】：

您可以像这样将变量传递给 newvar 函数。

<div *ngFor="let var of list">  
    <div>      {{newVar(var)}}    <div> 
</div>

【讨论】：

【解决方案5】：

我找到了解决方案，基本上你可以做类似的事情

<div *ngIf="func(var) as newVar">
   {{newVar.name}}
</div>

【讨论】：