Angular不会自动显示字符串数组中的更改
Angular是一种流行的前端开发框架，用于构建单页应用程序。它提供了一种简洁、高效的方式来管理应用程序的状态和用户界面。在Angular中，如果要自动显示字符串数组中的更改，可以使用数据绑定和变更检测机制。
数据绑定是Angular的核心特性之一，它允许将数据模型与用户界面进行绑定，实现数据的自动更新。在Angular中，有三种类型的数据绑定：插值表达式、属性绑定和事件绑定。
对于字符串数组的更改，可以使用插值表达式或属性绑定来实现自动显示。插值表达式使用双大括号语法将数据绑定到HTML模板中。例如，如果有一个字符串数组names，可以在模板中使用插值表达式来显示数组中的元素：
<ul>
<li *ngFor="let name of names">{{ name }}</li>
</ul>上述代码中，*ngFor是Angular的内置指令，用于循环遍历数组并生成相应的HTML元素。通过{{ name }}，每个数组元素都会自动显示在<li>标签中。
另一种方法是使用属性绑定，将数组绑定到HTML元素的属性上。例如，可以将数组绑定到<ul>元素的innerHTML属性上：
<ul [innerHTML]="names.join(', ')"></ul>上述代码中，[innerHTML]是属性绑定语法，将数组中的元素使用逗号连接后，赋值给innerHTML属性，从而实现自动显示。
需要注意的是，Angular的变更检测机制会自动检测数据模型的变化，并更新相应的视图。因此，当字符串数组发生更改时，Angular会自动更新视图，显示最新的数据。
在腾讯云的生态系统中，推荐使用腾讯云的云开发服务（CloudBase）来构建和部署Angular应用程序。CloudBase提供了一站式的云端开发平台，包括云函数、云数据库、云存储等服务，可以方便地与Angular应用程序集成。您可以通过以下链接了解更多关于腾讯云云开发的信息：
腾讯云云开发官网：https://cloud.tencent.com/product/tcb 腾讯云云开发文档：https://cloud.tencent.com/document/product/876
相关·内容
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <a href="#" ng-click="g(101)">Link<
浏览 9提问于2019-08-01得票数 1
回答已采纳
1回答
问题如下。当第一次初始化页面时，所有数据都将被正确更新。在HTML中，我使用了一个简单的表：
<mat-table [dataSource]="sumDataSource">
但是，如果在第一个初始化之后，您转到另一个页面并返回到原来的页面，则数据将不再更新。虽然所有事件都被正确处理，但服务器返回新数据。在组件本身中，sumDataSource变量的值也会发生变化，但是旧的数据仍然保留在HTML中。
app-routing.module.ts
const routes: Routes = ....
@NgModule({
imports: [RouterMo
浏览 7提问于2021-03-02得票数 0
回答已采纳
1回答
我正在进行一些自定义验证，并使用ngDialog显示错误。但出于某种原因，在获得此错误时：
Error: [ngRepeat:dupes] http://errors.angularjs.org/undefined/ngRepeat/dupes?p0=error%20in%20checkoutError&p1=string%3Ae
at Error (native)
at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular.min.js:6:453
at http://cdnjs.c
浏览 2提问于2014-09-21得票数 2
回答已采纳
1回答
我在jquery中做了一个简单的例子，在jquery中，我用div .I可以将文本附加到那个中，但是我需要使用的是角.js，但是它不是附加数据..why ?怎么可能?这里是我的柱塞
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.x" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bo
浏览 1提问于2014-08-16得票数 1
回答已采纳
2回答
用管道动态显示数组长度是可行的吗？这是我的密码：
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'lengthOfArray'
})
export class LengthOfArrayPipe implements PipeTransform {
transform(value: any): number {
return value.length;
}
}
我就是这样用的：
组件
listOfIdToExport: any[] = [];
模板
浏览 8提问于2017-06-23得票数 4
回答已采纳
1回答
我在一个Angular应用程序中编写了几行typescript代码，在构造函数中有几个布尔变量，该数组中每个对象的object.Part数组由输入变量组成。
selftest: boolean;
failed: boolean;
locoStateItems = [
{
name: 'FAILED',
isSelected: this.failed
},
{
name: 'SELFTESTED',
isSelected: this.selftest
}
稍后
浏览 7提问于2020-03-04得票数 2
回答已采纳
我已经在cloudinary中存储了图标。在这里，我使用ng-repeat列出了所有可以正常工作的商店，但是没有显示的图标我已经附上了我的html和控制器代码.i有像这样的图标*/icon1.png，
angular.module('test', [])
.controller('TestController', ['$scope','$filter','$http',
function($scope, $filter,$http) {
$http.get(&
浏览 2提问于2015-08-21得票数 1
2回答
我在一个Ionic2 / Angular2项目中工作。我有一个
*ngFor="let item of items | async | customPipe"
在我的密码里。Observable<Item[]>.异步是因为items是一个items。我的customPipe在第一次运行时运行良好。但是当我对其中一个做任何更改时，如果通过我的customPipe过滤掉它的项目，它仍然会显示出来。
有什么问题吗？*ngFor只运行一次吗？还是我要强制更新DOM？谢谢你的帮助。
浏览 2提问于2016-12-16得票数 1
当我试图编辑一个记录时，我无法设置mat-autocomplete的值我正在使用FormBuilder对象中的FormControl对象来使用自动完成，并使用Formbuilder.setValue()方法来设置从服务器接收的值尽管它向服务器发送了一个请求，因为我正在使用valueChanges方法的Observables ...任何帮助都将不胜感激
下面是我正在使用的代码
component.ts
this.filteredData = this.addDetailsForm.get('product').valueChanges
.debounceTime(400)
.do
浏览 0提问于2018-01-20得票数 1
1回答
该页面显示了一个潜水列表，它有一个“添加新潜水”、“清除潜水”和一个搜索框，当你在其中键入内容时，搜索框会过滤显示的列表。
这是模板：
<div class="container-fluid">
<h1>My Latest Dives (Angular/TypeScript)</h1>
<div class="row">
<div class="col-sm-5">
<button class="btn btn-primary btn-lg&#
浏览 1提问于2016-09-29得票数 2
当使用*ngFor多次渲染组件时，渲染的组件在DOM中不会按预期更新。
在离子页面中呈现组件：
<ion-row *ngFor="let file of files; let i = index">
<app-add-file (fileEvent)="fileEventHandler(i, $event)"></app-add-file> //component
</ion-row>
组件按预期显示，但是当组件中的某些内容发生更改时，更改不会反映在DOM中。
有没有办法强迫租借者？
我应该在组件中使用C
浏览 2提问于2020-12-17得票数 2
我现在开始学习angular，并试图理解可观察对象的概念以及如何使用它们。 我已经阅读了angular文档中关于它们的所有内容，但我要么没有正确理解这个概念，要么就是不可能。 我会解释我的想法： 我有一个input元素： <div class="response" *ngFor="let reply of currentResponse.replies">
<input style="word-break: break-all;" type="text" placeholder="Message
浏览 20提问于2020-01-22得票数 0
回答已采纳
获取并分配给数组的数据不会显示在ag-grid-angular组件中： 角度组件： columnDefs = [
{ headerName: 'Id', field: 'id' },
{ headerName: 'Name', field: 'name' },
{ headerName: 'Login', field: 'login' },
{ headerName: 'Email', field: 'email' },
{
浏览 114提问于2020-03-31得票数 2
回答已采纳
1回答
我已经实现了我的自动完成，没有错误，一切看起来都很好，但是绝对没有发生任何事情。我在输入字段中输入了一些内容，但似乎没有发生任何操作，控制台中也没有显示任何内容。
HTML
<form>
<mat-form-field>
<input type="text" matInput [formControl]="myControl" [matAutocomplete]="auto">
</mat-form-field>
<mat-autocomplete #
浏览 6提问于2018-01-19得票数 12
回答已采纳
我有这样的import { ReactiveFormsModule,FormsModule } from '@angular/forms'; import { ReactiveFormsModule,FormsModule } from '@angular/forms';
@NgModule({
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
],
declarations: [ //... all declar
浏览 64提问于2021-11-13得票数 2
回答已采纳
2回答
我有一个用于加载控制器的简单app.js。但是，控制器并没有被加载。会很感谢你的帮助。
这是我的app.js
/* globals APP, angular */
angular.module('templates-outlook', []);
angular.module(APP, [
'templates-outlook',
'ui.router'
])
.config[(
'$stateProvider',
function ($stateProvider) {
浏览 6提问于2018-10-02得票数 0
1回答
ng-重复不列出电影标题
、、、、
我试图创建一个简单的电影应用程序的角度。我可以对tmdb (电影数据库) api执行JSON请求，并在我的主页上显示原始结果。但我的问题是，我似乎不能只显示来自JSON请求的电影标题。
examplecontroller.js.coffee
angular.module('app.exampleApp').controller('exampleCtrl', [
'$scope', '$http', function($scope, $http) {
var base = 'http://api.themovi
浏览 0提问于2015-08-03得票数 2
回答已采纳
我正在创建一个非常简单的自定义指令，并试图通过使用'<‘符号将一个简单的字符串变量从父作用域传递到自定义指令隔离作用域。然后，我尝试在自定义指令控制器中为变量分配一个新值，并在模板中显示新值，但它仍然显示旧值。
这是我的父控制器：
(function(){
angular.module("app").controller("ctrl", ctrl);
function ctrl(){
ctrl = this;
ctrl.fullname = "Paul G.";
浏览 1提问于2017-11-17得票数 0
2回答
我正在修改服务中的数组，同时绑定到指令中的服务属性。现在我想从数组中删除一个项，但是我无法让Array.filter工作。我不确定是因为Array.filter是异步，还是因为它返回新数组，而不是修改原始或$digest循环。普通的for循环确实有效，但是既然我读到了更声明性数组方法的优点，我想我会问您为什么它不能工作。
指令
(function () {
"use strict";
function MyDirective(MyService) {
return {
restrict: "E",
templateUrl
浏览 6提问于2014-11-24得票数 0
回答已采纳
我有一个ListComponent和EntryComponent，用于在列表中附加一个项目。当通过DataService将项推入列表时，列表不会在ListComponent中更新。对于angular2的工作方式有什么想法吗？
名单处：
import {Injectable} from "angular2/core";
@Injectable()
export class DataService{
public items:Array<any> = [];
addItem(item:string):void{
this.item
浏览 2提问于2016-02-09得票数 0
1回答
我的工作是显示收集，我从DB的角度与火力数据库。我有控制器和服务设置。在html中，我使用search.users，期望它保存从DB获得的所有数据，但不会显示出来。我搞不懂为什么。我很少尝试过像angular.copy或$broadcast这样没有运气的东西。有人能在这方面提供建议吗？提前感激。
.controller('SearchController', function ($scope, SearchService, logout, $location){
var search = this;
search.users = SearchService.us
浏览 2提问于2015-11-19得票数 1
回答已采纳
1回答
在这个示例中，显示了非常简单的页面，其中有一个父组件和一个子组件。从父到子，我们传递两个值，一个是字符串，另一个是数组。
<child [aList]="sharedList" [aString]="sharedString"></child>
问题是，当我更新字符串值时，它只在子组件中更新，而不是在父组件中更新。但是，如果我从子组件更新数组值，它将同时更新(子组件和父组件)。
因此，我的问题是，为什么字符串值不在父级中从子元素中更新，而是在数组值中更新。我做错了什么。
浏览 1提问于2016-07-15得票数 1
回答已采纳
2回答
当底层数据发生变化时，我的角度指令中的视图似乎没有更新。我不确定我是不是错过了一个消化周期，但我似乎不知道发生了什么
指令：
(function(){
'use strict';
angular.module('app').directive('message', Message);
function Message() {
var markup = '<div class="slds">'+
'<div ng-repeat="
浏览 2提问于2016-03-21得票数 2
回答已采纳
<html>
<head>
<script src="../../../../Scripts/angular.min.js"></script>
<script src="../../../../Scripts/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
<scri
浏览 0提问于2016-06-16得票数 0
import {Component} from "angular2/core";
import {CORE_DIRECTIVES, FORM_DIRECTIVES, FormBuilder, ControlGroup, AbstractControl, Validators, Control} from "angular2/common";
@Component({
selector: 'parameters-form',
directives: [FORM_DIRECTIVES,CORE_DIRECTIVES],
te
浏览 3提问于2016-02-14得票数 3
回答已采纳
如何使用Angular js 1.0禁用日期选择器中的某些日期？我正在通过asp.net mvc应用程序中的控制器传递一些日期。我想使用Angular js1.0在日期选择器中禁用这些日期
浏览 3提问于2017-04-18得票数 0
我有如下的input标签，我需要使用array动态设置accept的值：
<input #myFile type="file" />
为了动态地设置接受属性，我使用了view child：
@ViewChild("myFile") myFileRef: ElementRef;
ngAfterViewInit() {
this.myFileRef.nativeElement.accept = ['.pdf','.doc','.docx','.xlsx', '.xls&#
浏览 0提问于2018-12-21得票数 0
在我的视图中，Am循环遍历一个对象数组(如果没有管道，就会显示整个列表)：
<ion-list>
<ion-item *ngFor= "let category of (productCategories | onlyhomecategory) " >
<ion-icon name="arrow-forward" item-right></ion-icon>
{{category.title}}
</ion-item>
</ion-list>
浏览 2提问于2016-06-09得票数 4
回答已采纳
我使用react-apollo来管理我的react应用程序中的客户端存储，所以没有后端graphql服务器。所有与apollo相关的东西都在客户端运行。我将所有UI状态存储在ApolloClient的缓存中。我还在客户端定义了所有的解析器。 下面是新建客户端实例的代码： new ApolloClient({
cache,
resolvers: {
Mutation: {
...cartResolvers,
},
},
typeDefs: [typeDefs]
}); 我读过这篇关于在apollo graphql变异和
浏览 17提问于2019-06-28得票数 0
我正在创建一个可点击的表单，它基于'td‘行JSON的数据填充另一个表单。该表单在星期一和星期二接受两个输入。我使用pristine重置(清除)表单，效果很好。我在第二次搜索时遇到了清除表单的问题。例如:输入星期一，单击搜索，单击星期一，现在输入Tuesday...when I单击搜索我想要删除星期一的信息。我该怎么做？。
Reset Function:
var clearResults = angular.copy($scope.results);
var clearRowItems = angular.copy($scope.rowItems);
$scope.rese
浏览 2提问于2015-04-22得票数 0
我想使用psycopg2将数据帧中的数据插入到表中，但是当我尝试插入时，它显示一条消息，指出数组必须以"{“或维度信息开头。下面是我的代码：
for f in df.iterrows():
cur.execute("INSERT INTO NumCasos VALUES (%s, %s)",(df.iloc[m, 0],df.iloc[m, 1].item()))
下面是显示的错误：
InvalidTextRepresentation: malformed array literal: "UlPkw"
LINE 1: INSERT INTO N
浏览 15提问于2021-06-08得票数 0
回答已采纳
5回答
我试图从randomuser.me服务器获取用户信息，并试图在html页面中显示这些用户数据。这就是我想要做的； randomuser.page.ts import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-randomuser',
templateUrl: './randomuser.
浏览 98提问于2019-05-23得票数 0
回答已采纳
我开始学习棱角分明，面对一些奇怪的行为。
我想动态地为手风琴添加一个新的标题，但是直到我显式地单击他的一些项目，我才会在UI上反映它。由于某些原因，在项目更改开始加载之前，他不会对其做出任何反应。
var mainApp = angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ngResource']);
mainApp.factory('teamSharedObj',['$rootScope', function($rootScope) {
retu
浏览 1提问于2014-11-17得票数 2
回答已采纳
我有一个组件，它在我的页面第一次加载时延迟加载images.For，然后使用延迟加载显示图像，但是如果我刷新或重新加载或关闭然后打开选项卡，那么我的图像是预先加载的，因为它现在是从cache.Is中获取的，有什么方法可以停止在angular 7中缓存我的组件吗？
浏览 31提问于2019-07-12得票数 1
回答已采纳
我刚刚在现有的代码库中编写了一个新的angular组件，由于不熟悉angular 4，我似乎无法根据模型中的更改来更新视图。我看过几个类似的问题，但我认为我的问题可能是独一无二的，因为他们的解决方案没有解决我的问题。
视图很简单:它有一个选择下拉列表，可以影响在页面上显示哪些日志。当选择发生变化时，它会调用控制器重新选择日志。
查看：
<nb-card size="small">
<nb-card-header>
<span>Filters</span>
<br />
<span>
浏览 3提问于2020-01-25得票数 1
1回答
我不知道为什么，我在一个Angular应用程序中，当我按下format document时，我的类型会被删除。 # Before:
export class AppComponent {
title:string = 'angular-todolist';
name:string = 'Michael';
someInteger:number = 10;
} # After:
export class AppComponent {
title = 'angular-todolist';
name = 'Michael
浏览 22提问于2019-01-25得票数 1
回答已采纳
我知道我在问一个答案非常简单的问题(我刚接触angular，在这里问这个问题确实需要很大的勇气;)。我有一个指令，它像这样显示时间：
Application.Directives
.directive('theClock', function(){
return {
retrict: 'EA',
templateUrl: 'partials/partial.clock.html',
link: function(scope, elem, attrs) {
scope
浏览 0提问于2013-01-09得票数 2
回答已采纳
我和这段代码斗争了好几天，我真的很感激你的洞察力。所以这就是..。
fileName，它在我的.h文件中声明为
NSString *fileName;
后来作为
@property (nonatomic, copy) NSString *fileName;
无法在viewWillDisappear中访问。它只是显示为零对象，或一些奇怪的值，当我调试。当我调试时，我的控制台显示这个msg：
fileName的打印描述：FileNumber1
当我到达viewWillDisappear时，我的控制台显示如下：
fileName的打印描述：
是啊，对fileName来说没什么..。值
浏览 6提问于2011-10-31得票数 0
回答已采纳
2回答
我正在尝试测试我的angular 9应用程序，但在运行ng serve时遇到错误。它说运行正常，但当我尝试显示页面时，它显示Cannot GET /。此外，当我尝试使用ng build构建它时，它显示相同的错误消息，但日志中没有任何有用的信息。 ERROR in node_modules/zone.js/lib/browser/event-target-legacy.d.ts:9:67 - error TS2304: Cannot find name '_ZonePrivate'.
9 export declare function eventTargetLegacyPat
浏览 52提问于2020-10-25得票数 0
我们正在使用DPS的PXPay为我们的应用程序生成付款。
在成功的事务中，提供的url如下所示
这绝对是进入浏览器的请求。但是在我的浏览器地址栏中显示的内容...而angular读取的"result“标记是这样的…
如果你仔细观察..。两个'==‘将从"result“令牌字符串的末尾去掉。
我已经在非angular应用程序中进行了测试，但这并没有发生。为什么angular要这样做，我如何防止它？
浏览 1提问于2014-07-23得票数 0
考虑以下代码：
angular.module('app', ['app.core'])
.factory('NameService', function() {
return {
getName: function() { return 'Omar' ;}
};
});
angular.module('app.core', [])
.controller('MainController', func
浏览 2提问于2016-11-12得票数 2
2回答
我在Ionic2和Angular2中是新手，试图在前端更新我的数组，但它不是updating.Moreover，它在后端(ts)完全更新，使用控制台进行检查。需要你的帮助
我的组成部分：
import { Component } from '@angular/core';
import { NavController, NavParams, ViewController } from 'ionic-angular';
@Component({
selector: 'page-modal-filter',
templateUr
浏览 4提问于2017-06-29得票数 0
今天我在玩角游戏，这时出现了这个错误。我在上读到了公认的答案，但我不知道它意味着什么。
模板：
<div class="container">
Paste your text here: <textarea #count width="150" height="150"></textarea><br>
<button class="btn btn-dark" (click)=check(count.value)>Count</button>
浏览 13提问于2021-12-23得票数 1
回答已采纳
这是角的行为，我不知道。
假设我在控制器中有一组项，并且在视图中重复它们。视图中有一个按钮，当我单击它时，会在数组中按一个项。在视图中更新ng重复列表。目前一切都很好。
但是.如果我只是在控制器内部的数组中推送一个新的项(比如说，我设置了一个超时)，视图中的ng-重复将不会注册数组的更改。
柱塞实例：
HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="
浏览 2提问于2015-10-01得票数 0
回答已采纳
2回答
我有一个使用angularBootstrapNavTree控件的网站。在我的本地机器上对我来说很好。在我的服务器上，我安装了Visual (它是MVC5 )，并调试了一个在服务器上发生的错误，但没有在本地进行序列化。现在，当我转到我的WebAPI2服务的URL时，我的数据将被返回。如果我用这个脚本浏览到页面(在.js文件中)：
var app, deps;
deps = ['angularBootstrapNavTree'];
if (angular.version.full.indexOf("1.2") >= 0)
{
deps.push(&
浏览 0提问于2014-04-10得票数 0
回答已采纳
我对提供者有一个问题，我得到了这个错误：
第2696行:错误:未知提供者:a
使用无限制角v 1.06，第2696行：
providerInjector = createInternalInjector(providerCache, function() {
throw Error("Unknown provider: " + path.join(' <- '));
}),
这是代码：
var myApp = angular.module('myApp', [], function ($interpolateProvider
浏览 6提问于2013-04-26得票数 0
我正在尝试使用在我的应用程序中显示网格选项。我建议显示网格，但在网格中没有数据显示&甚至浏览器控制台中也没有错误。
我已经根据app.module，Angular.json更新了，但是没有使用&网格显示0条记录。我试图使用创建这个问题，但它不允许我安装棱角光滑的网格包，因此无法发布实时示例。
我的代码
import { Component, OnInit } from '@angular/core';
import { Column, FieldType, Formatter, Formatters, GridOption } from 'angula
浏览 2提问于2019-01-14得票数 2
回答已采纳
我正在尝试建立一个使用超文本标记语言和angularJS的应用程序。
要求是有两个自动完成文本框来获取城市和名称。
我能把这两个都弄到手。对我来说问题不在于。我无法获取基于所选城市的名称(如果未选择城市:显示所有城市的名称&如果选择了城市，则仅显示城市的名称)
下面是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery.min.js"></script>
<s
浏览 2提问于2017-01-18得票数 0
我创建了一个简单的例子来演示我面临的一个奇怪的问题。
Stackblitz -
我有三个组成部分，下面是：
1- app组件
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'my-app',
template: `<hello [form]="form"
浏览 0提问于2018-12-05得票数 16
回答已采纳
我有一个指令，所有的设置都是使用=对属性进行双向数据绑定，我可以看到一切都很好。现在，每当我的绑定属性之一在父作用域中发生变化时，我就不得不在指令中调用一个函数，而我不知道如何做到这一点。
我基本上是在创建一个ui复选框按钮的版本，它可以处理对象数组。您可以传递指令一个allowed数组(包含所有不同的选项)和一个applied数组(它包含来自allowed的相同对象)。为了检查对象是否在allowed数组中，我有另一个数组，即id属性。在指令中，这是很好的工作，但是如果applied数组在指令之外发生变化，则id数组永远不会被更新。
指令：
angular.module('MyApp
浏览 3提问于2014-03-04得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
