Блог

Главная - Вопросы по программированию - Как отобразить пользовательский вывод на основе хранилища значений в firebase (Angular)

Как отобразить пользовательский вывод на основе хранилища значений в firebase (Angular)

#angular #firebase

#angular #firebase

Вопрос:

В моей 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>

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

Комментарии:

1. не могли бы вы опубликовать свой текущий код, пожалуйста

2. вы хотите отображать статус как new в таблице вместо 0

3. @PatricioVargas привет, я только что добавил код, пожалуйста, взгляните

4. @BearNithi Да, это верно

5. @BearNithi Спасибо за ответ!! что, если у меня есть более одного пользовательского вывода? например, «статус: Новый», «статус: ожидающий» и «статус: завершено».

Ответ №1:

Для достижения этого существует несколько способов 

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

или

TS

 getStatus(status: number): string {
   if(status === 0) {
     return 'new';
   }

  //you can add more user output here
}

HTML

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

Ответ №2:

Вы можете использовать ? троичный оператор при интерполяции следующим образом:

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

component.html

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