angular - 如何根据 Firebase 中的值存储显示用户输出(Angular)
问题描述
在我的 Firebase 中,状态存储为“0”、“1”、“2”、“3”。当我获取数据时,它以这种方式呈现“状态:0”。我如何对其进行编码,以便当我获取数据时它将显示“状态:新”而不是“状态:0”
组件.html
<html>
<table id="table" class="table table-striped">
<thead>
<tr>
<th>Due Date</th>
<th>Assigner</th>
<th>Assignee</th>
<th>Urgency</th>
<th>Description</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let content of acts">
<td>{{content.dueDate}}</td>
<td>{{content.Assigner}}</td>
<td>{{content.Assignee}}</td>
<td>{{content.urgency}}</td>
<td>{{content.description}}</td>
<td>{{content.status}}</td>
</tr>
</tbody>
</table>
</html>
组件.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators, FormArray } from
"@angular/forms";
import { TodoItem } from "../_models";
import { ToDoListService } from '../_services';
@Component({
selector: "toDoList",
templateUrl: "./toDoList.component.html",
styleUrls: ["./toDoList.component.css"]
})
export class ToDoList implements OnInit {
Form: FormGroup;
currentUser: User;
acts: Array<any> = [];
act: TodoItem;
constructor(private fb: FormBuilder,
private todoSrv: ToDoListService) {
let res2do = todoSrv.getAll();
res2do.then(result2do => {
result2do.subscribe(async _acts => {
this.acts = _acts;
console.log("Initial act", this.acts);
});
});
}
解决方案
您可以?
在插值中使用三元运算符,如下所示:
<td>{{(content.status === 0) ? 'New' : content.status }}</td>
如果你有多个状态,你应该在component.ts中创建一个方法,使用switch语句根据状态编号设置不同的值,如下所示:
getStatus(statusNum) {
let status = '';
switch(statusNum) {
case 0:
status = 'new';
break;
case 1:
status = 'pending';
break;
case 2:
status = 'completed';
break;
}
return status;
}
组件.html
<td>{{getStatus(content.status) }}</td>
推荐阅读
- javascript - 如何像 React.js 一样在 Java 中进行实时值更改
- python - 关闭在 python 的新窗口中打开的子进程
- python - 我收到 pyinstaller 的错误,从 py 到 exe 的转换工作正常,但是当我尝试打开它时出现错误
- css - :not() 用于 httml[lang] 的伪类不起作用
- android - Flutter 从 firebase 填充 DropDown 中的数据
- php - PHP SoapClient 的 WSDL 文件
- python - 进程以退出代码 137 结束(被信号 9:SIGKILL 中断):检索图像数据
- php - Google Cloud Vision 在本地主机上工作,但不在 Google Cloud 托管的 WordPress 网站上
- ios - 导航视图有问题(SwiftUI、iOS)
- python - 如何在 Python 中比较两个 3D 图?