如何使用angular 2+循环对象键并在表中显示
Angular是一种流行的前端开发框架，它提供了一种简洁、高效的方式来构建现代化的Web应用程序。在Angular中，使用循环对象键并在表中显示数据可以通过以下步骤完成：
- 首先，确保你已经安装了Angular的开发环境。你可以使用Angular CLI来快速搭建一个新的Angular项目。
- 在你的Angular项目中，创建一个组件来处理数据的显示和循环。你可以使用以下命令来生成一个新的组件：ng generate component table
- 在你的组件类中，定义一个对象数组来存储你要显示的数据。例如：data = [ { id: 1, name: 'John' }, { id: 2, name: 'Jane' }, { id: 3, name: 'Bob' } ];
- 在组件的HTML模板中，使用Angular的循环指令（*ngFor）来遍历对象数组并显示数据。例如：<table> <tr> <th>ID</th> <th>Name</th> </tr> <tr *ngFor="let item of data"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> </tr> </table>
- 最后，将你的组件添加到你的应用程序的其他部分中，以便在浏览器中显示表格。你可以在其他组件的HTML模板中使用组件的选择器来引用它。
这样，当你运行你的Angular应用程序时，你将看到一个包含对象数组数据的表格。
在腾讯云的生态系统中，有一些相关的产品可以帮助你构建和部署Angular应用程序：
- 云服务器（CVM）：提供可扩展的虚拟服务器实例，用于托管和运行你的Angular应用程序。你可以在腾讯云的云服务器产品页面（https://cloud.tencent.com/product/cvm）了解更多信息。
- 云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务，用于存储和管理你的应用程序的数据。你可以在腾讯云的云数据库MySQL版产品页面（https://cloud.tencent.com/product/cdb_mysql）了解更多信息。
- 云存储（COS）：提供安全、可靠的对象存储服务，用于存储和管理你的应用程序的静态资源文件（如图片、视频等）。你可以在腾讯云的云存储产品页面（https://cloud.tencent.com/product/cos）了解更多信息。
请注意，以上只是腾讯云提供的一些相关产品，你也可以根据自己的需求选择其他云计算服务提供商的产品。
相关·内容
我有一个表，我只想在this.rowData完全填满(因此所有数据都被提取)时才显示它。问题是我用两个http调用来填充它，如下所示：
ngOnInit() {
this.getTasks(this.item.availableTasks$); // This are the first data I want to fetch
this.getTasks(this.item.myTasks$); // This are the second data I want to fetch (now this.rowData have all the datas I need)
浏览 0提问于2018-10-02得票数 0
我查看了董事会和许多网站，但找不到解决我的问题。
这个问题已经讨论过了，但似乎对我的代码没有任何作用。所以!首先，我的中间件生成的JSON如下所示：
{
"uuid": "5c5260ec-5bcd-451a-ad68-57eb9572c185",
"latitude": 41,
"longitude": 1,
"temoin": {
"numeroDeTelephone": 342391,
"nom": "bruce",
&#
浏览 1提问于2017-04-11得票数 0
我正在读一本叫做Apress的Pro AngularJS的书，我只是想确保我理解所有的代码，我对下面的代码有点困惑。
下面是本书中的自定义筛选器，它接受2个参数、数据数组和属性名称。在书中，属性名称是数据中的类别键，设置为删除重复类别，以便显示指向每个类别的导航链接列表，而不重复。
angular.module("customFilters", [])
.filter("unique", function () {
return function (data, propertyName) {
if (angular
浏览 1提问于2015-09-17得票数 2
回答已采纳
我在angularjs中使用过ng-bind，如下所示
<div ng-bind="getVal()"></div>
其中getVal()返回一些值，它在控制器中。但是在Angular2中，我在组件中有一个函数getVal()，我需要像angular1一样从模板中调用它。
我试过了
<div [(ngModel)]="getVal()"></div>
但不走运，你知道吗？
浏览 3提问于2016-01-14得票数 41
回答已采纳
抱歉，正如我提到的那样。我是angular 6的新手。我看过这个链接，当我在angular 6中尝试这样做的时候，我卡在了中间，因为他们说"Add dependency to timeline your angular ：ngTimeline“，这意味着是哪一个？
我安装了angular-timelinejs3。添加css和javascript到index.html.When我放置指令:在app.component.html.And中我如何导入角度的ng-timeline js3我得到了error.Template解析error.can任何人请在这方面帮助我？
In Index.
浏览 5提问于2018-07-30得票数 0
我知道已经有很多关于这个话题的问题得到了回答。
我是Angular的新手，还不了解{{variable}}到底是如何工作的。
我正在使用一个API，响应是这样的：
data : "MTS-K"
license : "CC BY 4.0 - https://creativecommons.de"
ok : true
stations : Array(3)
0 : {id: "XXX", name: "XXX", brand: "XXX", street: "XXX", place: "YYY
浏览 4提问于2018-08-08得票数 1
回答已采纳
如何获取项目angular.forEach()的$index？
我想要这样的：
$scope.data = {
"name": "foo",
"info": "bar"
}
angular.forEach($scope.data, function (value, key) {
console.log($index + ' - ' + value.name + ' - ' + value.info)
})
浏览 0提问于2016-09-13得票数 2
如何重新编译被其他xyz库修改的HTML？其他xyz库向DOM添加了一些exra内容，现在Angular (单击)方法不起作用。 在angular 1中，我们是这样做的： 应用this.$ this.$compile(angular.element(document.querySelectorAll('.someHTMlElement')))(this.$scope)；.$apply()； 有没有人能建议一下如何在Angular 2+中做到这一点？
浏览 8提问于2019-04-17得票数 1
更新：$scope.$apply()；似乎是正确的方法，但我使用的是Angular6.我将如何实现相同的特性？
我目前正试图以一种特定的方式更新一个表。我不希望通过.filter属性、自定义管道等来实现这一点，而是希望将希望显示的数据直接分配给dataSource的属性。
我已经尝试将dataSource.filteredData分配给我想要显示的数据。但是，即使dataSource.filteredData进行了更新，该表也无法反映这些更改。
我是否改变了正确的变量？如何通过直接编辑dataSource的属性(即通过.filteredData )更新可查看的表内容？
希望这是有意义的，如果没
浏览 0提问于2018-06-08得票数 8
回答已采纳
1回答
在我的程序中，iam试图使用带有键和值的ng-重复显示结果数组，但没有使用properly.But，输出在控制台中正确显示。我认为这是一个简单的错误，但我无法弄清楚。这是密码。
app.controller("taglistcontroller",function($scope,MyService1)
{
var photodetails=MyService1.getProperty1();
var array=[];
angular.forEach(photodetails, function(value1)
{
var
浏览 1提问于2014-08-28得票数 0
回答已采纳
我正在尝试用创建的Rest API在angular 2中实现get和post请求。
我能够成功地实现get请求并从我的API获取数据。
但我无法发出post请求。
下面显示的是我的Rest微服务代码
@CrossOrigin(origins = "http://localhost:4200")
@GetMapping("/checkUsers")
public String checkLogin() throws JsonProcessingException {
ObjectMapper mapper = new ObjectMapper();
浏览 0提问于2017-11-21得票数 1
5回答
我有一个带有一些表格数据的JSON提要，我使用Vue.js来显示一个HTML：
<tr v-for="row, index in content">
<td class="index" v-text="index + 1"></td>
<td v-for="column in row" v-text="column"></td>
</tr>
这个提要为每一行返回一个数组，但是有些行有命名键。使用这个简单的foreach-循环，它
浏览 0提问于2019-06-24得票数 2
回答已采纳
我正在做一个项目，使用Angular4从应用程序接口获取数据，并使用*ngFor呈现数据表。因为我还有更多具有相同结构的aips，所以我想使用(key，value)对来显示它们。在AngularJS中，我正确地呈现了如下表格：
<!--This is Good in AngularJS-->
<table>
<thead>
<tr>
<th ng-repeat="(key, value) in data.items[0]"> {{key}}
&l
浏览 0提问于2017-08-31得票数 1
回答已采纳
1回答
我使用ajax从joomla组件获取一些json编码的数据。我收到的是我将在下一张图片中显示的内容：
现在有2个对象(也就是2个课程)。现在我想向DOM显示这两个过程(名称、类别等)，但是我不知道如何使用javascript/jQuery，也不知道如何遍历它们。我认为angular可能也是一种解决方案，但我不太确定。
jQuery.ajax({
method:"POST",
url: 'url',
data:{filters:filters},
jsonpCallback: 'j
浏览 1提问于2015-09-04得票数 0
如果Angular应用程序或代码被停止，那么在浏览器中我们就能够看到网页。但在重定向或页面导航，我仍然能够看到网页，但与中断的功能，因为代码没有运行。如何处理此问题或显示服务器已停止？
浏览 23提问于2019-12-02得票数 0
我有这样的数组列表，
它随机地将数据作为一个相同的模板，无论它的键在数组列表中的所有数组中都是相同的。我想在表中显示这个数组列表，如下所示
并始终更改列表中数组的键。有时它有两个键，像电话，地址。有时它有三个键，如姓名，电话，地址。
那么在angular中有像这样的映射数据的函数吗？
浏览 0提问于2020-03-19得票数 1
我想使用angular.forEach()函数创建一个对象，然后我需要推送另一个对象，并将所有值初始化为false，但下面的方法指出了错误。
如何才能正确地做到这一点？如果我使用"item.id“和"index.id”，它将不会创建预期的功能。我附上了一张照片，以指出预期的功能。
angular.forEach(metaData.validationRules, function (item, key) {
//want to push object to another object
angular.forEac
浏览 0提问于2016-02-03得票数 1
2回答
我被困在一个我必须要写的程序上。
基本上，它要求用户输入一个字符，以及用户希望该字符显示多少次。每行只有10个字符。我想不出如何在10点停止，然后继续下一行。
输出示例：
Enter a character: *
Enter the number of characters to display: 36
**********
**********
我目前使用的是For循环。
编辑**我的代码
main () {
int num = 0,i;
char get_char;
printf("Enter a character: ");
scanf(
浏览 0提问于2012-09-21得票数 1
回答已采纳
2回答
我在显示后端系统的数据。数据来自一个用于接收新行的时间窗口的表。我有一个在角定时器中取行的机制。给出下面的模板，我的问题是如何将这些新行添加到我的列表中，如下面所示，而不重新绘制整个列表。
template: `
<h1>{{title}}</h1>
<h2>My favorite hero is: {{myHero}}</h2>
<p>Heroes:</p>
<ul>
<li *ngFor="let hero of heroes">
{{ her
浏览 2提问于2017-10-16得票数 2
回答已采纳
我正在尝试学习如何使用DreamFactory 2，但没有太多可用的信息。他们的教程假设你已经了解了服务器端的知识。我没有，也找不到像样的教程。JavaScript编程，但我也是个新手。
我可以从Angular做基本的CRUD。但是，现在我想从一个表中获取数据，但从另一个表中替换一些数据并将其发送到前端。我用那个子表设置了一个虚拟关系，不出所料，它作为父数据中的一个对象包含在JSON有效负载中。
{
resource: [
"item_name": 12,
"thing_by_thing_id":
"thing_name
浏览 10提问于2018-01-25得票数 0
回答已采纳
1回答
获取字符串而不是数字
、、、
我正在开发一个基于“字符串”而不是变量“数字”回答的测验应用程序。我尝试了不同的语法，但它只显示一个空白，没有显示数据/错误。正如您可以在下面看到我的代码，我将给您一个我想要的示例逻辑。 if(answer.correct == "answerstring"){displayvariable == "STRINGTOBEDISPLAYED"}; 这是我的“question.json” {
"questions": [
{
"flashCardFront": "<im
浏览 21提问于2019-02-18得票数 0
1回答
下午好,
我开始棱角分明了。我想做一个表，我希望在我的应用程序中的许多位置使用。
这个表将是许多父组件的子组件，因此我希望这些组件传递表、标题数组和行数组。
下面是父ts的一个示例：
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { PrestationService } from '../services/prestation.service';
@Compon
浏览 2提问于2019-01-19得票数 0
回答已采纳
1回答
我正试图在angular6中做一个过滤管。到目前为止我得到了这个：
search.component.html：
<input class="form-control" [(ngModel)]="searchService.query.title" name="title">
search.component.ts：
import { Component, OnInit } from '@angular/core';
import { SearchDataService } from './search-dat
浏览 0提问于2018-05-21得票数 0
回答已采纳
我正在学习角9，已经通过了英雄之旅的应用程序和教程。我使用本教程作为基础来添加新特性，例如远程资源上的CRUD操作，并且在项目中添加了@ng- but /ng-引导，但我无法让angular-bootstrap-toggle工作。
上的说明与我迄今学到的不匹配，我在任何地方都找不到解决方案。
例如，我不知道这个命令angular.module('myApp', ['ui.toggle']);如何与角9和我所使用的教程相匹配。
当我单击按钮时，如何让系统调用onChange()？
angular.json
"styles": [
浏览 2提问于2020-06-27得票数 2
回答已采纳
当“删除”按钮单击表中的任何一行时，我尝试实现模态，其中它弹出一个要求确认的模态窗口。
当我只是在没有模态的情况下实现delete时，它看起来很好，只删除了特定的行，但是在使用该模式时，它只删除了第一行，而没有删除选定的行。
user.component.html
<h1>{{welcome}}</h1>
<table class="table table-bordered">
<tr>
<th>#</th>
<th>Game</th>
浏览 2提问于2017-06-10得票数 0
我是Angular的新手，我的任务是将AngularJs转换为Angular 8。
谁能告诉我什么是ng-scope，ng-pristine，ng-form-valid...？在Angular 8中，它的等价物是什么？
浏览 8提问于2019-11-25得票数 0
回答已采纳
1回答
我正在将Angular2添加到一个现有的应用程序中，但是在关于RxJS类型的webpack版本中，我遇到了异常。我正在从命令行运行webpack。这里有一个指向存储库的链接。从Phase9文件夹中运行'npm install‘，然后运行'npm start’以重现错误：
ERROR in [default] c:\Dev\angular-upgrade\Phase9\node_modules\rxjs\add\operator\zipAll.d.ts:2:15
Invalid module name in augmentation, module '../../Obse
浏览 3提问于2016-08-18得票数 0
回答已采纳
1回答
我正在尝试将对象列表打印到HTML表中。我对Angular非常陌生。我一直在看Udemy上的Mosh教程，但它们与我正在构建的并不完全匹配。在我的情况下，DB结构是不同的。 下面是组件代码： import { AngularFireDatabase } from '@angular/fire/database';
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
@Component({
selector: 'app-live
浏览 12提问于2019-10-12得票数 0
1回答
我试图在div中动态显示html。然而，div ng-bind-html根本不显示(在火狐、chrome和safari上)。
看着这个网站的其他帖子，我发现我必须包括ngSanitize。
我在这里找到了这个代码片段：
angular.module('myApp', ['ngSanitize']);
然而，我不知道我应该在哪里写这段代码。你知道我是怎么做到的吗？
非常感谢！
下面是我的代码：
Component.ts中的代码：
import { Component, OnInit, SecurityContext } from '@angular/cor
浏览 57提问于2018-08-08得票数 1
回答已采纳
标题: Angular 8-在angular材质的网格中显示图像。
我正在尝试在角度材质的网格中显示通过web ap从SQL服务器检索到的图像。
表中的图像存储为: varbinary NOT NULL
这些行是从表中检索的，但在显示时失败。
我收到错误:找不到类型为' object‘的不同支持对象'object Object’。NgFor仅支持绑定到迭代对象，如数组。
我是否需要做一些转换或其他操作才能使图像出现在网格中？
我的SQL server表定义：
CREATE TABLE [dbo].[tblImages]
(
[ImageId] [i
浏览 9提问于2019-11-14得票数 0
回答已采纳
3回答
我有一个从API调用返回的对象，我正尝试在HTML中的一个表中显示该对象的详细信息。我可以获取密钥，但不能获取值。我使用的是angular 7。
我试过让keys = Object.keys(successMsg.body.result);来给我"ABC"，我怎么得到其他的值呢？
在我使用的HTML中：
<tbody>
<tr *ngFor="let data of dataToShow | keyvalue">
<td> {{data.key}} </td>
<td> {{data.value}
浏览 20提问于2019-12-02得票数 0
1回答
我们有一个独特的情况，我们使用类型记录，混合ng1和2，但不使用任何模块加载程序。我能够引导ng 1和ng2，但是我无法从降级的角2组件获得任何响应，我在代码中放置了一个断点，看到代码运行，但是组件没有显示任何内容。
我没有任何错误，没有在编译阶段和运行时。
下面是代码：
myapp.js -角1应用程序定义，es2015
(function() {
'use strict';
angular.module('myApp', []);
})();
myapp.ng2.ts -角2应用程序定义，类型记录
namespace MyApp {
let
浏览 2提问于2016-09-29得票数 2
我有一个json对象。它不是按升序排列的。
$scope.myData = {
"MAX" : "some value",
"Forms" : "some value",
"Grids And Tables" : "some value",
"Navigation" : "some value",
"Services & APIs" : "some val
浏览 0提问于2013-12-10得票数 7
我正在致力于将一个大型AngularJS应用程序升级到Angular 5+。这意味着在混合AngularJS应用程序中使用新的Angular 5组件。在许多情况下，表单嵌套在其他表单中。旧的AngularJS代码的父表单如下所示： export default function PersonDirective() {
return {
restrict: "E",
template: `
<div ng-form="personForm">
<
浏览 31提问于2020-04-23得票数 3
我正在构建一个表单来与远程API交互，方法是根据用户选择的复选框构建一个GET请求查询字符串。
我最初的想法是做一个完整的if / out列表，检查模型对象键是否为真，然后只从对象键名中提取一个干净的数组。然而，是否有一种更自动化的方法来做到这一点呢？
我在想一些类似于angular.foreach的东西，但我想不出如何将对象键名作为一个值出来。
例如：
function submit() {
var pushData = [];
angular.foreach(vm.export, function(item, index){
if (item == true) {
浏览 4提问于2016-05-12得票数 0
回答已采纳
我的api返回了以下数据。
[{"category":"Amazon","month":"Feb","total":9.75},
{"category":"Amazon","month":"Mar","total":169.44},
{"category":"Amazon","month":"Apr","total":10.69},
{"catego
浏览 3提问于2016-11-18得票数 2
回答已采纳
1回答
我是一个新手，我开始了这个项目，以了解更多关于这个框架的知识。我创建了一个将数据放入json-ld的应用程序，我的应用程序可以将数据添加到json-ld，但是没有我想要的输出格式，这个one：<<“模式：>>.this”是我的html和角文件：
<!DOCTYPE HTML>
<html>
<head>
<title>
reelyActive: Angular Test
</title>
<script src="https://ajax.goog
浏览 3提问于2015-05-12得票数 4
我已经开始使用ionic从头开始构建一个应用程序，并且喜欢包含框架。
我在网页上运行这个例子没有问题，但是我用ionic失败了。
我已经用创建了这个项目
ionic start form blank --v2 --ts
我已经链接了index.html中的js文件。
<script type="text/javascript" src="build/js/libs/schema-form/angular.min.js"></script>
<script type="text/javascript" src=
浏览 33提问于2016-09-16得票数 1
1回答
我最近发布了一个问题，关于白色测试基于angular的应用程序的问题(参考：wait until Angular has finished loading issue ) 事实证明，完成的检查对angular 1.x应用程序有效，而我们的应用程序运行在angular 6.x上。 然后我找到了那篇文章：Detecting that Angular 2 is done running 这解释了如何对angular 2+应用程序进行类似的检查。我已经以类似于"Michal Filip“解释的方式设置了检查。 我还尝试使用了这篇文章中进一步提出的ngWebdriver解决方案。 这两种方法都
浏览 8提问于2019-01-14得票数 1
回答已采纳
1回答
我将通过以下代码获得twitter用户的时间线：
但是我不知道如何从ascx文件在网站上显示用户时间表。请帮帮我..。
浏览 3提问于2014-07-08得票数 0
回答已采纳
首先，抱歉，代码不能在代码片段中运行。既不是codepan，也不是jsfiddle。我还在上传，但可能会试着在本地运行。我正在使用WebStorm中的Angular CLI项目。
我想在我的应用程序中做的是创建一些类似于待办事项列表的东西。当点击“创建一个新列表”时，应该会创建一个新的矩形(待办事项卡片)，就在它的旁边。不是在它下面，不是在上面，而是在它的右边。
我做了.cloneNode()和.appendChild()。它做到了，但我的问题是我不能控制.appenChild()结果的位置。它总是在现有待办事项卡片的下方插入新的待办事项卡片。
求求你，谁给我的心灵带来安宁！
import
浏览 23提问于2020-05-28得票数 0
回答已采纳
1回答
角标记误差
、、、、
我突然收到了这个，它不允许我正确地使用我的传单地图。每次单击地图时，都会将标记添加到相同的坐标中。当我尝试用函数删除标记时，它会清空标记-数组，但是标记在地图上仍然是可见的。到底怎么回事？
Error: [$parse:syntax] Syntax Error: Token '.0' is an unexpected token at column 8 of the expression [markers.0] starting at [.0].
http://errors.angularjs.org/1.4.8/$parse/syntax?p0=.0&p1=i
浏览 3提问于2015-11-24得票数 2
回答已采纳
1回答
我正在用Angular2构建一个交互式web应用程序，我正在寻找一种方法来捕获在一个角度组件上的右键点击。我还需要防止在右键单击时出现浏览器上下文菜单，这样我就可以显示自己的自定义上下文菜单。
我知道在angular 1中，您必须创建一个自定义指令来捕获右键单击事件。这在Angular 2中仍然是这样的吗，或者它是内置的/有更简单的方法吗？我已经看过之前的一些SO问题，但它们与Angular2无关。
如何实现捕获右键并阻止浏览器上下文菜单出现在Angular2中？
浏览 1提问于2017-01-16得票数 28
回答已采纳
2回答
我在Angular JS中遇到了以下问题。我有这个循环：
angular.forEach(objects, function(object)
{
UpdateFactory.updateObjectInDatabase(version, object).then(function(newVersion)
{
version = newVersion;
alert("Update successful! Version number increased.);
});
});
但我的问题是:如果前面的调用已经完成，我只想调用Factory方法
浏览 4提问于2015-02-18得票数 0
最新的Hawtio v1.5.9 war附带了angularjs v1.1.5。我们如何使用最新的angular呢？找不到任何这样的例子。
浏览 9提问于2018-04-20得票数 0
3回答
我正在尝试在Angular中调用JS函数(API调用)。我最初在HTML/JS中尝试它，在那里一切都可以工作，但现在在Angular中它不能。
在我的app.component.html中，我做了一个按钮，它应该调用ts文件中的一个函数。
<button (click)="CallFBNewsFeed()">Login with Facebook</button>
在我的app.component.ts中，我得到了一个应该被调用的函数。首先：
declare var getFBNewsfeed: any;
然后在导出类AppComponent中：
Cal
浏览 0提问于2018-02-27得票数 0
我试图按如下方式将JSON数据导入list.html，但我的尝试失败了。我尝试过遵循其他类似文章中描述的模式，但没有任何运气，也没有找到与我的类似的JSON数据格式化的场景。如何让givenName、familyName、primaryTitle、phones.value和photo.small这样的字段出现？
index.html：
<!doctype html>
<html lang="en" ng-app="directoryApp">
<head>
<meta charset="UTF-8"&
浏览 4提问于2015-10-01得票数 0
回答已采纳
因此，我正在尝试开发一个离子应用程序，它将处理不同的对象数组，尽管我知道正在读取的对象的类型(位置、名片等)以及该类型的对象必须具有哪些字段，但我需要动态添加未知字段，以与已知字段不同地处理它们。在我当前正在工作的这个例子中，我只想显示卡片“address”的值(稍后我会添加其他东西，这就是我不想做<ion-card-content [class]="key" *ngIf="card['address']">{{card["address"]}} </ion-card-content>的原因。因此，在这个
浏览 9提问于2020-01-07得票数 2
回答已采纳
1回答
getspacecol(){
this.gets=true;
this.selectedfeatures=[];
this.variantService.getData().subscribe((dat) => {
this.dataa = dat;
for(let i=0;i<this.selectedItems.length;i++)
{
this.tool=this.selectedItems[i].itemName;
}
console.log(this.tool);
for(let i=0 ; i<this.dataa.le
浏览 3提问于2020-04-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
