所以我试图检测通过组件中的输入传入的数组的更改。无论我尝试将两个数组分开多少次，它们总是包含相同的值。
我已经尝试slice和Array.from并且两者都产生相同的结果，两个数组具有相同的信息，而不管一个数据根本没有更新，并且是与原始数据分开的数组。
这个有趣的部分是，如果我检查一个数组是firstArray == secondArray的另一个实例，我得到false，而当不使用{{1}时返回true }或slice
Array.fromimport { Component, Input, DoCheck } from '@angular/core';
class Requirement {
title: string;
passes: boolean;
}
@Component({
selector: 'password-requirement-indicator',
templateUrl: './password-requirement-indicator.component.html',
styleUrls: [ './password-requirement-indicator.component.scss' ]
})
export class PasswordRequirementIndicator implements DoCheck {
// Current requirements
currentRequirements: Requirement[];
// Previous requirements
previousRequirements: Requirement[];
ngDoCheck(){
console.log(this.previousRequirements, this.currentRequirements);
if ( !this.previousRequirements ){
this.previousRequirements = Array.from(this.currentRequirements);
}
}
@Input() set requirements (requirements: Requirement[] ){
this.currentRequirements = Array.from(requirements);
}
}
为了更深入一点，父组件正在创建一个初始数组，并通过输入import { Component, OnInit, ViewChild } from '@angular/core';
@Component({
templateUrl: './index.component.html',
styleUrls: ['./index.component.css']
})
export class IndexComponent {
passes: boolean = false;
requirements: any[] = [
{
title: 'Has at least one special character',
passes: false
},
{
title: 'Has no spaces',
passes: false
},
{
title: 'Has at least 1 letter',
passes: false
},
{
title: 'Has at least 1 number',
passes: false
},
{
title: 'Has 8-10 total characters',
passes: false
},
{
title: 'Has no more than 3 of the same character in a row',
passes: false
}
]
// Updates the requirements as needed
updateRequirements: Function = (password: string) => {
// Update the special character requirement
this.requirements[0].passes = this.hasSpecialCharacter(password);
// Update the no spaces requirement
this.requirements[1].passes = this.hasNoSpaces(password);
// Update the one letter requirement
this.requirements[2].passes = this.hasOneLetter(password);
// Update the one number requirement
this.requirements[3].passes = this.hasOneNumber(password);
// Update the 8-10 character requirement
this.requirements[4].passes = this.isRightLength(password);
// Update the onenumber requirement
this.requirements[5].passes = this.hasNoRepeatCharacters(password);
// Check if all checks passed
let passes: boolean = true;
for ( var i =0, j=this.requirements.length; i<j; i++ ){
if ( !this.requirements[i].passes ) {
passes = false;
i=j;
}
}
this.passes = passes;
}
hasSpecialCharacter: Function = (password: string) => {
// Check for a match and return whether we found one or not
return password.match(/[\\!\@\#\$\%\^\&\*\(\)\{\}\"\<\>\?\/\:\;\'\-\=\|\[\]\,\.]/g) ? true : false;
}
hasNoSpaces: Function = (password: string) => {
// Check the password and return if we found spaces or not
return password.match(/\s/g) ? false : true;
}
hasOneLetter: Function = (password: string) => {
// Check the password and return if we found at least one letter
return password.match(/[a-zA-Z]/g) ? true : false;
}
hasOneNumber: Function = (password: string) => {
// Check the password and return if we found at least one number
return password.match(/[0-9]/g) ? true : false;
}
isRightLength: Function = (password: string) => {
// Check the password and return if it is between 8 and 10 characters
return typeof password === "string" && password.length >= 8 && password.length <= 10;
}
hasNoRepeatCharacters: Function = (password: string) => {
// Check the password and return if any characters are repeated more than three times
return password.match(/(.).*?\1\1\1/g) ? false : true;
}
}
将其传递给子组件。
然后它会更新这个初始数组而不会破坏它，这意味着在将此数组传递给组件时会创建一个引用。哪个好，这就是我需要它来为我的用途工作的方式。
但是当我尝试创建一个新数组来存储旧状态以便使用<component [requirements]="requirements"></component>与新状态进行比较时，无论我做什么，以前的要求和当前需求数组都具有相同的值，即使它们是在不同的时间创建的，并且可以作为不是彼此实例的不同数组进行验证。
这是巫术。
如何在更新之前创建一个维护数组先前值的数组，以便检查数组中任何对象的值是否已更改？
编写代码来执行此操作对我来说不是问题，实际上我之前已将其写出来，但我需要能够将先前的状态存储在数组中，其值不会使用原始输入进行更新。 / p>
答案 0 :(得分：1)
好消息：这不是巫术！您的问题是，在JavaScript中，对象是reference types，而不是值类型。所以在这段代码中：
this.previousRequirements = Array.from(this.currentRequirements);
您正在制作现有对象的 new 数组。在将它们放入新数组之前，您真正想做的是clone现有对象。这是一种方法：
this.previousRequirements = this.currentRequirements.map(req => Object.assign(new Requirement(), req));
（如果您无权访问Object.assign()，这会更烦人，但您可以这样做。）现在您有了一个新的 new 对象数组。
希望有所帮助;祝你好运！