Fatal编程技术网
  • angular/
  • Angular 如何基于firebase中存储的值显示用户输出（角度）

Angular 如何基于firebase中存储的值显示用户输出（角度）

angular firebase

Angular 如何基于firebase中存储的值显示用户输出（角度）,angular,firebase,Angular,Firebase,在我的firebase中，状态存储为“0”、“1”、“2”、“3”。当我获取数据时，它以“状态：0”的方式显示。如何对其进行编码，以便在获取数据时显示“状态：新建”而不是“状态：0” component.html <html> <table id="table" class="table table-striped"> <thead> <tr>

在我的firebase中，状态存储为“0”、“1”、“2”、“3”。当我获取数据时，它以“状态：0”的方式显示。如何对其进行编码，以便在获取数据时显示“状态：新建”而不是“状态：0”

component.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>

  <td>{{getStatus(content.status) }}</td>


到期日
转让人
受让人
紧迫性
描述
地位
{{content.dueDate}
{{content.Assigner}}
{{content.Assignee}
{{content.emergency}
{{content.description}
{{content.status}
组件技术

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);
    });
  });
}

从'@angular/core'导入{Component，OnInit}；
从导入{FormBuilder，FormGroup，Validators，FormArray}
“@angular/forms”；
从“./_models”导入{TodoItem}”；
从“../\u服务”导入{ToDoListService}；
@组成部分({
选择器：“toDoList”，
templateUrl:“./toDoList.component.html”，
样式URL:[“/toDoList.component.css”]
})
导出类ToDoList实现OnInit{
表格：表格组；
当前用户：用户；
acts:Array=[]；
行动：TodoItem；
构造函数（私有fb:FormBuilder，
私有todoSrv:ToDoListService）{
设res2do=todoSrv.getAll（）；
res2do.then（result2do=>{
result2do.subscribe（异步）{
this.acts=\u acts；
console.log（“初始动作”，this.act）；
});
});
}
您可以在插值中使用
？
三元运算符，如下所示：

<td>{{(content.status === 0) ? 'New' : content.status }}</td>

getStatus(statusNum) {
  let status = '';
  switch(statusNum) {
    case 0: 
      status = 'new';
      break;
    case 1:
      status = 'pending';
      break;
    case 2:
      status = 'completed';
      break;
   }
  return status;
}
component.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>

  <td>{{getStatus(content.status) }}</td>

{{getStatus（content.status）}
您可以在插值中使用
？
三元运算符，如下所示：

<td>{{(content.status === 0) ? 'New' : content.status }}</td>

getStatus(statusNum) {
  let status = '';
  switch(statusNum) {
    case 0: 
      status = 'new';
      break;
    case 1:
      status = 'pending';
      break;
    case 2:
      status = 'completed';
      break;
   }
  return status;
}
component.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>

  <td>{{getStatus(content.status) }}</td>

{{getStatus（content.status）}
实现这一点有几种方法

<td>{{content.status === 0 ? 'new' : content.status }}</td>
HTML

 <td>{{ getStatus(content.status)}}</td>

{{getStatus（content.status）}
实现这一点有几种方法

<td>{{content.status === 0 ? 'new' : content.status }}</td>
HTML

 <td>{{ getStatus(content.status)}}</td>

{{getStatus（content.status）}
你能发布你当前的代码吗？你想在表中显示状态为
new
，而不是
0
@PatricioVargas嘿，我刚刚添加了代码，请看一看look@BearNithi是的right@BearNithi谢谢你的回答！！如果我有多个用户输出怎么办？例如“状态：新建”、“状态：挂起”和“状态：已完成”。你能发布你当前的代码吗？你想在表中显示状态为
new
，而不是
0
@PatricioVargas嘿，我刚刚添加了代码，请看一看look@BearNithi是的right@BearNithi谢谢你的回答！！如果我有多个用户输出怎么办？例如“状态：新建”状态：待定”和“状态：已完成”。