我有一个对象数组。我需要验证第一个人的名字是否与Andrea相同，我需要将红色背景应用到整个页面。但它不适合我
app.component.html
<body>
<div *ngFor="let persona in persone">
<div [ngClass]="{'body': verificaNome() }">i</div>
<body>
app.component.ts
//CREARE UN ARRAY DI OGGETTI CHE CONTIENE ARRAY DI OGGETTI
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'esercizi';
persone: any = [
{
nome: 'Andrea',
cognome: 'Pasculli',
indirizzo: {
via: 'Bari 1',
},
anni: [{
minimo: [1,2,3],
medio: [4,5,6],
massimo: [7,8,9],
}],
},
{
nome: 'Chiara',
cognome: 'Grispo',
indirizzo: {
via: 'Torino 5',
},
anni: [{
minimo: [3,4,5],
medio: [6,7,8],
massimo: [9,10,11],
}],
}]
variabile: boolean = false;
ngOnInit(){
this.verificaNome();
}
constructor(){}
verificaNome(): boolean {
if(this.persone[0].nome=="Andrea"){
return this.variabile = true;
} else {
return false;
}
//return false;
}
}
app.component.scss
.body{
background-color : red;
}
我不知道问题在哪里考虑逻辑看起来对我来说是正确的，我没有任何语法错误
如果你需要改变整个页面的背景，当有一个人有.name === 'Andrea'时，你应该改变body元素的类，而不是persona元素的类。
在这个例子中，我有一个css规则:
.red-background{
background-color: red;
}
(您使用的选择器不是.body)。
然后在你的组件中，你应该有一个函数来检查在整个persone数组中是否有这样一个项目满足条件:
hasPersonaNamedAndrea() {
return this.persone.some(p => p.name === 'Andrea');
}
和你的模板:
<body [ngClass]="{'red-background': hasPersonaNamedAndrea()}">
<div *ngFor="let persona of persone">
<div>{{persona.name}}</div>
<body>
进一步考虑:
在您的组件中，您有函数verificaNome()，该函数仅在数组中的第一个元素满足条件时才始终执行if(this.persone[0].nome=="Andrea")检查。模板中的迭代循环索引没有改变状态，因此它没有基于当前正在进行的循环迭代执行操作。
仍然有可能我做了一些假设…也许你不希望整个页面来更改背景，在这种情况下，可以更改角色div的类。但是，您肯定需要一个条件来实际评估您希望更改的角色的背景。