如何修改ngif模板中的值

Question

我是Angular的新手。我想修改ngif模板中的值。我生成了名为研究列表的组件，我想查看在research-list.ts中定义的研究，但是当我在research-list.component.html中使用modify((，并在research-list.components.ts中定义modify(。我该如何修复它们？？

谢谢！

<research-list.component.html>

<div class="section">
<div class="header">
<div class="label">
{{currentYear}}
</div>
</div>
<table>
<div *ngFor = "let re of research">
<div *ngIf = "re.year==currentYear; then ifCase else modify()"></div>

<ng-template #ifCase>
<tr>
<div class="content" fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="100px">

<div class="research">
<span class="title">
{{re.title}}
</span>
<span class="obliqueDesc">
{{re.obliqueDesc}}
</span>
<div class="members">
{{re.members}}
</div>
</div>

<div class="picture" fxFlex="50" fxFlex.xs="100">

<div class="image">
<img src="{{re.image}}" alt="{{re.title}}">
</div>
</div>

</div>

</tr>
</ng-template>

</div>
</table>

</div>

<研究列表.组件.ts>

import { Component, OnInit } from '@angular/core';
import { Research } from './research';
import { ResearchList } from './research-list';
@Component({
selector: 'app-research-list',
templateUrl: './research-list.component.html',
styleUrls: ['./research-list.component.scss']
})

export class ResearchListComponent implements OnInit {
research : Research[] = ResearchList;
currentYear = 2021;
modify()
{
return this.currentYear = this.currentYear-1;
}
constructor() { }
ngOnInit(): void {
}
}

<研究列表。ts>

import { Research } from "./research";
export const ResearchList : Research[] = [

{ year : 2021, title : 'VISLAB', obliqueDesc : 'Developing VISLAB Website. Using Angular, Node.js, express, PostgreSQL.', members : 'Ji Hwan Kim and Jung Min Lee / 2021.6 ~', image : 'assets/images/main_banner_0.jpg'},
{ year : 2021, title : 'CareNet', obliqueDesc : 'A project to analyze and visualize the power data of Korea Electric Power Corporation (KEPCO)', members : 'Sang Jun Park and San Hong / 2021.6 ~', image : 'assets/images/CareNet_main.jpg'},
{ year : 2021, title : 'PatientFlow', obliqueDesc : 'A project that analyzes and visualizes hospital-related data across the country and clusters it', members : 'Jung Yeon Kim and Jin Woo Park / 2021.6 ~', image : 'assets/images/PatientFlow_main.png'},
{ year : 2020, title : 'PatientFlow', obliqueDesc : 'A project that analyzes and visualizes hospital-related data across the country and clusters it', members : 'Jung Yeon Kim and Jin Woo Park / 2021.6 ~', image : 'assets/images/PatientFlow_main.png'},
{ year : 2020, title : 'PatientFlow', obliqueDesc : 'A project that analyzes and visualizes hospital-related data across the country and clusters it', members : 'Jung Yeon Kim and Jin Woo Park / 2021.6 ~', image : 'assets/images/PatientFlow_main.png'},
{ year : 2019, title : 'PatientFlow', obliqueDesc : 'A project that analyzes and visualizes hospital-related data across the country and clusters it', members : 'Jung Yeon Kim and Jin Woo Park / 2021.6 ~', image : 'assets/images/PatientFlow_main.png'},
{ year : 2019, title : 'PatientFlow', obliqueDesc : 'A project that analyzes and visualizes hospital-related data across the country and clusters it', members : 'Jung Yeon Kim and Jin Woo Park / 2021.6 ~', image : 'assets/images/PatientFlow_main.png'},
{ year : 2019, title : 'PatientFlow', obliqueDesc : 'A project that analyzes and visualizes hospital-related data across the country and clusters it', members : 'Jung Yeon Kim and Jin Woo Park / 2021.6 ~', image : 'assets/images/PatientFlow_main.png'},
{ year : 2019, title : 'PatientFlow', obliqueDesc : 'A project that analyzes and visualizes hospital-related data across the country and clusters it', members : 'Jung Yeon Kim and Jin Woo Park / 2021.6 ~', image : 'assets/images/PatientFlow_main.png'},
{ year : 2018, title : 'PatientFlow', obliqueDesc : 'A project that analyzes and visualizes hospital-related data across the country and clusters it', members : 'Jung Yeon Kim and Jin Woo Park / 2021.6 ~', image : 'assets/images/PatientFlow_main.png'},
];

<研究。ts>

export class Research
{
year : number;
title : string;
obliqueDesc : string;
members : string;
image : string;
}

Answer 1

'else'部分采用模板变量引用。否则它就不能正常工作。尝试将逻辑部分保留在.ts文件中，并有条件地将元素放入.html部分中

Answer 2

我已经更新了您的实体模型结构

描述：在第一次更新re.year==currentYear到re.year===currentYear时，使用了严格相等来了解更多信息。以及第二部分的条件，该条件在Angular官方文档中没有显示任何关于条件模板的信息。您还可以访问此链接了解更多信息：https://angular.io/api/common/NgIf

<div class="section">
<div class="header">
<div class="label">
{{currentYear}}
</div>
</div>
<table>
<div *ngFor = "let re of research">
<div *ngIf = "re.year===currentYear; then ifCase else modifyTemplate"></div>

<ng-template #ifCase>
<tr>
<div class="content" fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="100px">

<div class="research">
<span class="title">
{{re.title}}
</span>
<span class="obliqueDesc">
{{re.obliqueDesc}}
</span>
<div class="members">
{{re.members}}
</div>
</div>

<div class="picture" fxFlex="50" fxFlex.xs="100">

<div class="image">
<img src="{{re.image}}" alt="{{re.title}}">
</div>
</div>

</div>

</tr>
</ng-template>
<ng-template #modifyTemplate>
this is another else component 'modifyed Template' 
</ng-template>

</div>
</table>

</div>

谢谢

Answer 3

我想你误解了如何使用ngIfThen

<div *ngIf = "re.year==currentYear; then ifCase else modify()"></div>

因为在then子句中，ifCase是一个模板，所以else也应该只是一个模板变量。

使用管道可以轻松实现您想要实现的目标。