正文 

当前位置： 首页 > 源码 >

ngFor 无法通过与 @Input 的组件绑定来迭代另一个组件

     2023-02-23     141

关键词：

【中文标题】ngFor 无法通过与 @Input 的组件绑定来迭代另一个组件【英文标题】：ngFor not able to iterate in another component through component binding with @Input 【发布时间】：2021-07-03 11:58:09 【问题描述】：

app.component.ts

import  Component  from '@angular/core';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  serverElements :[type:"blueprint",name:"abnc",content:'Just A Test'];

app.component.html

<div class="container">
 

  <div class="row">
    <div class="col-xs-12">
      <app-server-element *ngFor="let serverElement of serverElements" [childElement]="serverElement">abc</app-server-element>
    </div>
  </div>
</div>

src-->app-->服务器元素

server-element.component.ts

import  Component, Input, OnInit  from '@angular/core';

@Component(
  selector: 'app-server-element',
  templateUrl: './server-element.component.html',
  styleUrls: ['./server-element.component.css']
)
export class ServerElementComponent implements OnInit 
 @Input('childElement') element:type:string,name:string,content:string;

 constructor()  

  ngOnInit(): void

服务器元素.component.html

<div class="panel panel-default">
  <div class="panel-heading">Hello</div>
  <div class="panel-body">
    <p>
      <strong *ngIf="element.type ==='server' " style="color: red;">  element.content </strong>
      <em *ngIf="element.type==='blueprint'"> element.content </em>
    </p>
  </div>
</div>

它应该通过 迭代单个 serverElements。但它没有做，虽然我正在学习的课程（Maximilian Schwarzmuller）代码工作正常..帮助

【问题讨论】：

【参考方案1】：

您错过了 serverElements 的分配。它应该有一些价值，你只需声明类型。

app.component.ts

import  Component  from '@angular/core';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)
export class AppComponent 
  // assign the value, you declare it as type but it was emplty
  serverElements = [
     type: "blueprint", name: "abnc", content: "Just A Test" 
  ];

【讨论】：

使用 `let` 绑定来增加值的生命周期

】使用`let`绑定来增加值的生命周期【英文标题】：Usinga`let`bindingtoincreaseavalueslifetime【发布时间】：2014-11-2216:20:09【问题描述】：我编写了以下代码从stdin中读取整数数组：usestd::io::self,BufRead;fnmain()letstdin=io::stdin();forlineinstdin.lock... 查看详情

python使用osxdictionaryapipython绑定来获取单词的字典定义（并将其着色）(代码片段)

查看详情

Angular 2 @Input - 如何从父组件绑定子组件的 ID 属性？

】Angular2@Input-如何从父组件绑定子组件的ID属性？【英文标题】：Angular2@Input-HowtobindIDpropertyofchildcomponentfromparentcomponent?【发布时间】：2017-02-1512:15:31【问题描述】：在我的父组件中，我想创建一个具有与其关联的唯一ID的子组件... 查看详情

无法读取子组件中的 ngFor 数据，未定义获取属性

】无法读取子组件中的ngFor数据，未定义获取属性【英文标题】：NotabletoreadngFordatainchildcomponent,gettingpropertyisnotdefined【发布时间】：2020-05-0915:40:47【问题描述】：我是angular6的新手，我有一个父组件，其中有一个子组件，我在父... 查看详情

如何在 Android 中使用数据绑定来绑定 layout_width 和 layout_height

...布尔值来指示ImageView，因此如果我需要更多空间用于其他组件，它会缩小。我正在使用DataBindi 查看详情

如何使用 WPF 按钮的参数或绑定来更改 XAML 样式中的 fa 图标

】如何使用WPF按钮的参数或绑定来更改XAML样式中的fa图标【英文标题】：HowtouseparametersorbindingforWPFbuttonstochangefaiconsinXAMLstyles【发布时间】：2022-01-1101:10:38【问题描述】：我为WPF中的按钮创建了XAML样式，以用于菜单项。创建菜单... 查看详情

angular父子组件之间的传值

...，如下面两种方式：父组件在引用子组件的标签的时候，通过[]符号将父组件的变量名赋值给该变量；子组件通过在变量名前面加上@Input装饰器的方式，可以从父组件取值，实现父子组件的传值。在第一种方案的基础上，使用一... 查看详情

如何为多个文本框使用一个绑定来分隔 WPF XAML 中的三位数字？

】如何为多个文本框使用一个绑定来分隔WPFXAML中的三位数字？【英文标题】：HowdoIuseonebindingformultipletextboxestoseparatethree-digitnumbersinWPFXAML?【发布时间】：2022-01-0723:44:50【问题描述】：我在VisualStudio2019中使用C#WPF我想将我的TextBoxes... 查看详情

<input> 元素中的“name”属性与 *ngFor 的 Angular2 绑定

】<input>元素中的“name”属性与*ngFor的Angular2绑定【英文标题】：Angular2bindingof"name"attributein<input>elementswith*ngFor【发布时间】：2017-08-1005:49:31【问题描述】：我正在试验Angular2和AngularMaterial。我使用*ngFor让Angular为... 查看详情

Angular2（最终版本）组件中的*ngFor：无法绑定到'ngForOf'，因为它不是'div'的已知属性[重复]

】Angular2（最终版本）组件中的*ngFor：无法绑定到\\\'ngForOf\\\'，因为它不是\\\'div\\\'的已知属性[重复]【英文标题】：Angular2(finalversion)*ngForincomponent:Can\'tbindto\'ngForOf\'sinceitisn\'taknownpropertyof\'div\'[duplicate]Angular2（最终版本）组件中... 查看详情

如何使用 @Input 在 *ngFor 指令中设置管道

...2019-02-0517:35:32【问题描述】：我有一个有3个输入参数的组件json_columnsjson_rowsname_filter如何才能将name_filter设置为过滤该组数据的管道？component.ts@Input(\'json_columns\')col 查看详情

vue的基础语法

...e是基于mvvm模式下的一个框架，那么何谓mvvm呢？我们可以通过这张图来明显的感觉到model与view之间是通过ViewModel双向绑定来实现交互的。然后Vue也是通过new一个Vue对象来同时绑定model与view。 接下来可以来看一下vue的生命周期... 查看详情

将右元素的数据从ngfor循环传递给子组件(代码片段)

我希望将父组件上的ngfor循环中的数据注入子组件。当我在父组件模板上单击相应的子组件模板的渲染时，此子组件应该使用父组件的ngfor循环中的右元素的数据呈现模态（下面的代码显示了子组件模板上的html标签）父母的模板... 查看详情

通过变量与 Getter 将数据传递给组件之间的区别

】通过变量与Getter将数据传递给组件之间的区别【英文标题】：DifferencebetweenpassingdatatoacomponentviaVariablevsGetter【发布时间】：2021-01-1323:17:24【问题描述】：我通过@Input()装饰器将数据传递给子组件时遇到了问题。子组件.ts：exportcl... 查看详情

*ngFor 如何与 Angular 2 中的模板变量一起工作？

...angular2?【发布时间】：2017-08-0200:31:24【问题描述】：主要组件：HTML<event-thumbnail*ngFor=\'letevent1ofevents\'#thumbnail[event2]="event1"(eventClick)=\'handleEv 查看详情

ngFor 与 Observables？

...时间】：2017-05-1720:47:33【问题描述】：我正在转换Angular2组件以使用异步数据源。我有一个&lt;divclass="cols4"*ngFor="letlineoflines;leti=index;"&gt;，它在lines是一个对象数组时起作用，但是，lin 查看详情

Angular：引导程序无法触发选择选项，因为选项是使用 ngFor 动态绑定的

】Angular：引导程序无法触发选择选项，因为选项是使用ngFor动态绑定的【英文标题】：Angular:bootstrapfailstotriggerselectoptionasoptionsaredynamicallybindedusingngFor【发布时间】：2019-11-0610:34:25【问题描述】：我有一个在我的组件中动态加载... 查看详情

更改ngfor循环中调用的组件内的父值(代码片段)

使用angular7，我试图将一个对象传递给ngFor循环中的子组件，但是当我更改内部的值时，它不会在父级上更改。在我的父母，我有<divclass="pieceContainer"*ngFor="letpieceofdata?.piece"><app-piece[(data)]="piece"(change)="doSomething(event$)"></... 查看详情