单击时显示来自 ngFor 数组的子内容
Display Sub content from ngFor Array on Click
在我的项目中，屏幕上显示的每个卡片值都是使用 ngFor 从 JSON 循环过来的。期望的目标是当用户单击卡片时，它仅显示 JSON 中关于该卡片的信息，同时仅使用 *ngIf 显示我的 div 中的内容。我创建了一个动画以在我想要显示内容的蒙版中淡入淡出。目前，如果您单击卡片，它只会显示缩略图数组。我没有收到任何错误或任何继续。我不知疲倦地寻找有关如何在单击时显示 individual 键的答案。我需要一次显示一张卡片的卡片图像、名称和描述。我觉得我遇到了障碍，没有通过谷歌搜索正确的描述。如果我需要进一步澄清，请告诉我。感谢您提供任何指导。
[
{
"id": 1,
"content": [
{
"sin": "Vanity",
"card": "/assets/img/vanity.jpg",
"icon": "/assets/img/vanityIcon.jpg",
"info": "In almost every list pride (or hubris or vanity) is considered the original and most serious of the seven deadly sins, and indeed the ultimate source from which the others arise. It is identified as a desire to be more important or attractive than others, failing to acknowledge the good work of others, and excessive love of self (especially holding self out of proper position toward God). Dante's definition was 'love of self perverted to hatred and contempt for one's neighbor.' In Jacob Bidermann's medieval miracle play, Cenodoxus, pride is the deadliest of all the sins and leads directly to the damnation of the titulary famed Parisian doctor. In perhaps the best-known example, the story of Lucifer, pride (his desire to compete with God) was what caused his fall from Heaven, and his resultant transformation into Satan. Vanity and narcissism are prime examples of this sin. In Dante's Divine Comedy, the penitents were forced to walk with stone slabs bearing down on their backs in order to induce feelings of humility."
}
]
},
{
"id": 2,
"content": [
{
"sin": "Envy",
"card": "/assets/img/envy.jpg",
"icon": "/assets/img/envyIcon.jpg",
"info": "Like greed, envy may be characterized by an insatiable desire; they differ, however, for two main reasons. First, greed is largely associated with material goods, whereas envy may apply more generally. Second, those who commit the sin of envy resent that another person has something they perceive themselves as lacking, and wish the other person to be deprived of it. Dante defined this as 'love of one's own good perverted to a desire to deprive other men of theirs.' In Dante's Purgatory, the punishment for the envious is to have their eyes sewn shut with wire because they have gained sinful pleasure from seeing others brought low. Aquinas described envy as 'sorrow for another's good'."
}
]
},
{
"id": 3,
"content": [
{
"sin": "Sloth",
"card": "/assets/img/sloth.jpg",
"icon": "/assets/img/slothIcon.jpg",
"info": "More than other sins, the definition of sloth has changed considerably since its original inclusion among the seven deadly sins. In fact it was first called the sin of sadness or despair. It had been in the early years of Christianity characterized by what modern writers would now describe as melancholy: apathy, depression, and joylessness — the last being viewed as being a refusal to enjoy the goodness of God and the world God created. Originally, its place was fulfilled by two other aspects, acedia and sadness. The former described a spiritual apathy that affected the faithful by discouraging them from their religious work. Sadness (tristitia in Latin) described a feeling of dissatisfaction or discontent, which caused unhappiness with one's current situation. When Thomas Aquinas selected acedia for his list, he described it as an 'uneasiness of the mind', being a progenitor for lesser sins such as restlessness and instability. Dante refined this definition further, describing sloth as being the 'failure to love God with all one's heart, all one's mind and all one's soul.' He also described it as the middle sin, and as such was the only sin characterised by an absence or insufficiency of love. In his 'Purgatorio', the slothful penitents were made to run continuously at top speed."
}
]
},
{
"id": 4,
"content": [
{
"sin": "Wrath",
"card": "/assets/img/wrath.jpg",
"icon": "/assets/img/wrathIcon.jpg",
"info": "Wrath (or anger or 'Rage') may be described as inordinate and uncontrolled feelings of hatred and anger. These feelings can manifest as vehement denial of the truth, both to others and in the form of self-denial, impatience with the procedure of law, and the desire to seek revenge outside of the workings of the justice system (such as engaging in vigilantism) and generally wishing to do evil or harm to others. The transgressions borne of vengeance are among the most serious, including murder, assault, and in extreme cases, genocide. Wrath is the only sin not necessarily associated with selfishness or self-interest (although one can of course be wrathful for selfish reasons, such as jealousy, closely related to the sin of envy). Dante described vengeance as 'love of justice perverted to revenge and spite'. In its original form, the sin of wrath also encompassed anger pointed internally rather than externally. Thus suicide was deemed as the ultimate, albeit tragic, expression of wrath directed inwardly, a final rejection of God's gifts."
}
]
},
{
"id": 5,
"content": [
{
"sin": "Lust",
"card": "/assets/img/lust.jpg",
"icon": "/assets/img/lustIcon.jpg",
"info": "Lust (or lechery) is usually thought of as excessive thoughts or desires of a sexual nature. Giving in to lusts can lead to sexual or sociological compulsions and/or transgressions including (but not limited to) sexual addiction, fornication, adultery, bestiality, rape, perversion, and incest. Dante's criterion was 'excessive love of others', which therefore rendered love and devotion to God as secondary. In 'Purgatorio', the penitent walks within flames to purge himself of lustful/sexual thoughts and feelings."
}
]
},
{
"id": 6,
"content": [
{
"sin": "Gluttony",
"card": "/assets/img/gluttony.jpg",
"icon": "/assets/img/gluttonyIcon.jpg",
"info": "Derived from the Latin gluttire, meaning to gulp down or swallow, gluttony is the over-indulgence and over-consumption of anything to the point of waste. In the Christian religions, it is considered a sin because of the excessive desire for food, or its withholding from the needy. Depending on the culture, it can be seen as either a vice or a sign of status. Where food is relatively scarce, being able to eat well might be something to take pride in (although this can also result in a moral backlash when confronted with the reality of those less fortunate). Where food is routinely plentiful, it may be considered a sign of self-control to resist the temptation to over-indulge."
}
]
},
{
"id": 7,
"content": [
{
"sin": "Greed",
"card": "/assets/img/greed.jpg",
"icon": "/assets/img/greedIcon.jpg",
"info": "Greed (or avarice, covetousness) is, like lust and gluttony, a sin of excess. However, greed (as seen by the church) is applied to the acquisition of wealth in particular. St. Thomas Aquinas wrote that greed was 'a sin against God, just as all mortal sins, in as much as man condemns things eternal for the sake of temporal things.'' In Dante's Purgatory, the penitents were bound and laid face down on the ground for having concentrated too much on earthly thoughts. 'Avarice' is more of a blanket term that can describe many other examples of greedy behavior. These include disloyalty, deliberate betrayal, or treason,[citations needed] especially for personal gain, for example through bribery . Scavenging[citation needed] and hoarding of materials or objects, theft and robbery, especially by means of violence, trickery, or manipulation of authority are all actions that may be inspired by greed. Such misdeeds can include simony, where one profits from soliciting goods within the actual confines of a church."
}
]
}
]
（已更新以包含完整 JSON）
<!-- CARD CONTENT -->
<div class="table" *ngFor="let sins of cardwork; index as i">
<!-- CARD CONTENT -->
<div class="cardsLayedOut">
<a href="#" (click)="toggleCard(i)"> // User Clicks here
<img class="card" [ngStyle]="rotateCards()" *ngFor="let sublist of sins.content" [src]="sublist.card" />
</a>
</div>
<div class="" *ngIf="cards" #cards [@clickevent]>
<div class="mask columnCentered">
<div class="contentLayout" *ngFor="let sublist of sins[i]?.content">
<img class="largeCard" [src]="sublist[i]?.card" />
<div class="sinInfo">
<h3>{{sublist[i]?.sin}}</h3>
<p>{{sublist[i]?.info}}</p>
</div>
</div>
<app-thumnail></app-thumnail>
</div>
</div>
</div>
我对hiding/showing卡信息的切换是
toggleCard() {
this.cards = true;
}
这是添加卡片数组holder时的当前状态=[];在我的 toggleCard(i) this.cards[i] = !this.cards[i];
第二张图片是每张卡片的理想状态。
你的切换功能不对。
您正在发送索引 i 作为模板中的参数 (click)="toggleCard(i)" 但没有在您的组件中捕获它。
您应该捕获该索引 i，因为它唯一标识了被点击的卡片。如果不是，您如何知道点击了哪张卡片？
toggleCard(var i) {
// Handle click event.
}
此外，您只是使用一个 cards 变量来切换所有卡片的状态。因此，如果单击一张卡片，将显示或隐藏所有卡片，而不仅仅是单击的卡片。
您应该有一个数组 cards[]，它采用 boolean 值并跟踪每张卡片的切换状态。
在您的 toggleCard() 函数中，每当单击卡片时，根据您收到的索引 i 切换此数组中的适当值。
var cards = []; // Initialize with boolean values.
// Array length would be equal to the number of your cards.
toggleCard(var i) {
this.cards[i] = !this.cards[i];
}
编辑：
关于实施建议更改后的问题：
在你的StackBlitz中：
- 您正在将
selectedCard 初始化为 false，但此变量采用 number 值。这应该不是问题，因为 JavaScript 允许动态类型。
- 此语句
<p>{{ sin.content.sin }}</p> 中有一个拼写错误 sin 而不是 sins。应该是 <p>{{ sins.content.sin }}</p>.
解决这些问题，您应该会看到所有卡片。
在我的项目中，屏幕上显示的每个卡片值都是使用 ngFor 从 JSON 循环过来的。期望的目标是当用户单击卡片时，它仅显示 JSON 中关于该卡片的信息，同时仅使用 *ngIf 显示我的 div 中的内容。我创建了一个动画以在我想要显示内容的蒙版中淡入淡出。目前，如果您单击卡片，它只会显示缩略图数组。我没有收到任何错误或任何继续。我不知疲倦地寻找有关如何在单击时显示 individual 键的答案。我需要一次显示一张卡片的卡片图像、名称和描述。我觉得我遇到了障碍，没有通过谷歌搜索正确的描述。如果我需要进一步澄清，请告诉我。感谢您提供任何指导。
[
{
"id": 1,
"content": [
{
"sin": "Vanity",
"card": "/assets/img/vanity.jpg",
"icon": "/assets/img/vanityIcon.jpg",
"info": "In almost every list pride (or hubris or vanity) is considered the original and most serious of the seven deadly sins, and indeed the ultimate source from which the others arise. It is identified as a desire to be more important or attractive than others, failing to acknowledge the good work of others, and excessive love of self (especially holding self out of proper position toward God). Dante's definition was 'love of self perverted to hatred and contempt for one's neighbor.' In Jacob Bidermann's medieval miracle play, Cenodoxus, pride is the deadliest of all the sins and leads directly to the damnation of the titulary famed Parisian doctor. In perhaps the best-known example, the story of Lucifer, pride (his desire to compete with God) was what caused his fall from Heaven, and his resultant transformation into Satan. Vanity and narcissism are prime examples of this sin. In Dante's Divine Comedy, the penitents were forced to walk with stone slabs bearing down on their backs in order to induce feelings of humility."
}
]
},
{
"id": 2,
"content": [
{
"sin": "Envy",
"card": "/assets/img/envy.jpg",
"icon": "/assets/img/envyIcon.jpg",
"info": "Like greed, envy may be characterized by an insatiable desire; they differ, however, for two main reasons. First, greed is largely associated with material goods, whereas envy may apply more generally. Second, those who commit the sin of envy resent that another person has something they perceive themselves as lacking, and wish the other person to be deprived of it. Dante defined this as 'love of one's own good perverted to a desire to deprive other men of theirs.' In Dante's Purgatory, the punishment for the envious is to have their eyes sewn shut with wire because they have gained sinful pleasure from seeing others brought low. Aquinas described envy as 'sorrow for another's good'."
}
]
},
{
"id": 3,
"content": [
{
"sin": "Sloth",
"card": "/assets/img/sloth.jpg",
"icon": "/assets/img/slothIcon.jpg",
"info": "More than other sins, the definition of sloth has changed considerably since its original inclusion among the seven deadly sins. In fact it was first called the sin of sadness or despair. It had been in the early years of Christianity characterized by what modern writers would now describe as melancholy: apathy, depression, and joylessness — the last being viewed as being a refusal to enjoy the goodness of God and the world God created. Originally, its place was fulfilled by two other aspects, acedia and sadness. The former described a spiritual apathy that affected the faithful by discouraging them from their religious work. Sadness (tristitia in Latin) described a feeling of dissatisfaction or discontent, which caused unhappiness with one's current situation. When Thomas Aquinas selected acedia for his list, he described it as an 'uneasiness of the mind', being a progenitor for lesser sins such as restlessness and instability. Dante refined this definition further, describing sloth as being the 'failure to love God with all one's heart, all one's mind and all one's soul.' He also described it as the middle sin, and as such was the only sin characterised by an absence or insufficiency of love. In his 'Purgatorio', the slothful penitents were made to run continuously at top speed."
}
]
},
{
"id": 4,
"content": [
{
"sin": "Wrath",
"card": "/assets/img/wrath.jpg",
"icon": "/assets/img/wrathIcon.jpg",
"info": "Wrath (or anger or 'Rage') may be described as inordinate and uncontrolled feelings of hatred and anger. These feelings can manifest as vehement denial of the truth, both to others and in the form of self-denial, impatience with the procedure of law, and the desire to seek revenge outside of the workings of the justice system (such as engaging in vigilantism) and generally wishing to do evil or harm to others. The transgressions borne of vengeance are among the most serious, including murder, assault, and in extreme cases, genocide. Wrath is the only sin not necessarily associated with selfishness or self-interest (although one can of course be wrathful for selfish reasons, such as jealousy, closely related to the sin of envy). Dante described vengeance as 'love of justice perverted to revenge and spite'. In its original form, the sin of wrath also encompassed anger pointed internally rather than externally. Thus suicide was deemed as the ultimate, albeit tragic, expression of wrath directed inwardly, a final rejection of God's gifts."
}
]
},
{
"id": 5,
"content": [
{
"sin": "Lust",
"card": "/assets/img/lust.jpg",
"icon": "/assets/img/lustIcon.jpg",
"info": "Lust (or lechery) is usually thought of as excessive thoughts or desires of a sexual nature. Giving in to lusts can lead to sexual or sociological compulsions and/or transgressions including (but not limited to) sexual addiction, fornication, adultery, bestiality, rape, perversion, and incest. Dante's criterion was 'excessive love of others', which therefore rendered love and devotion to God as secondary. In 'Purgatorio', the penitent walks within flames to purge himself of lustful/sexual thoughts and feelings."
}
]
},
{
"id": 6,
"content": [
{
"sin": "Gluttony",
"card": "/assets/img/gluttony.jpg",
"icon": "/assets/img/gluttonyIcon.jpg",
"info": "Derived from the Latin gluttire, meaning to gulp down or swallow, gluttony is the over-indulgence and over-consumption of anything to the point of waste. In the Christian religions, it is considered a sin because of the excessive desire for food, or its withholding from the needy. Depending on the culture, it can be seen as either a vice or a sign of status. Where food is relatively scarce, being able to eat well might be something to take pride in (although this can also result in a moral backlash when confronted with the reality of those less fortunate). Where food is routinely plentiful, it may be considered a sign of self-control to resist the temptation to over-indulge."
}
]
},
{
"id": 7,
"content": [
{
"sin": "Greed",
"card": "/assets/img/greed.jpg",
"icon": "/assets/img/greedIcon.jpg",
"info": "Greed (or avarice, covetousness) is, like lust and gluttony, a sin of excess. However, greed (as seen by the church) is applied to the acquisition of wealth in particular. St. Thomas Aquinas wrote that greed was 'a sin against God, just as all mortal sins, in as much as man condemns things eternal for the sake of temporal things.'' In Dante's Purgatory, the penitents were bound and laid face down on the ground for having concentrated too much on earthly thoughts. 'Avarice' is more of a blanket term that can describe many other examples of greedy behavior. These include disloyalty, deliberate betrayal, or treason,[citations needed] especially for personal gain, for example through bribery . Scavenging[citation needed] and hoarding of materials or objects, theft and robbery, especially by means of violence, trickery, or manipulation of authority are all actions that may be inspired by greed. Such misdeeds can include simony, where one profits from soliciting goods within the actual confines of a church."
}
]
}
]
（已更新以包含完整 JSON）
<!-- CARD CONTENT -->
<div class="table" *ngFor="let sins of cardwork; index as i">
<!-- CARD CONTENT -->
<div class="cardsLayedOut">
<a href="#" (click)="toggleCard(i)"> // User Clicks here
<img class="card" [ngStyle]="rotateCards()" *ngFor="let sublist of sins.content" [src]="sublist.card" />
</a>
</div>
<div class="" *ngIf="cards" #cards [@clickevent]>
<div class="mask columnCentered">
<div class="contentLayout" *ngFor="let sublist of sins[i]?.content">
<img class="largeCard" [src]="sublist[i]?.card" />
<div class="sinInfo">
<h3>{{sublist[i]?.sin}}</h3>
<p>{{sublist[i]?.info}}</p>
</div>
</div>
<app-thumnail></app-thumnail>
</div>
</div>
</div>
我对hiding/showing卡信息的切换是
toggleCard() {
this.cards = true;
}
你的切换功能不对。
您正在发送索引 i 作为模板中的参数 (click)="toggleCard(i)" 但没有在您的组件中捕获它。
您应该捕获该索引 i，因为它唯一标识了被点击的卡片。如果不是，您如何知道点击了哪张卡片？
toggleCard(var i) {
// Handle click event.
}
此外，您只是使用一个 cards 变量来切换所有卡片的状态。因此，如果单击一张卡片，将显示或隐藏所有卡片，而不仅仅是单击的卡片。
您应该有一个数组 cards[]，它采用 boolean 值并跟踪每张卡片的切换状态。
在您的 toggleCard() 函数中，每当单击卡片时，根据您收到的索引 i 切换此数组中的适当值。
var cards = []; // Initialize with boolean values.
// Array length would be equal to the number of your cards.
toggleCard(var i) {
this.cards[i] = !this.cards[i];
}
编辑：
关于实施建议更改后的问题：
在你的StackBlitz中：
- 您正在将
selectedCard初始化为false，但此变量采用number值。这应该不是问题，因为 JavaScript 允许动态类型。 - 此语句
<p>{{ sin.content.sin }}</p>中有一个拼写错误sin而不是sins。应该是<p>{{ sins.content.sin }}</p>.
解决这些问题，您应该会看到所有卡片。