Question

我刚刚开始使用Angular 4，并且有一个我正在研究的项目涉及显示使用REST API检索的数据。数据似乎正在被正确检索并且表单正确填充。

现在，API返回的其中一个值只包含一个字符。我希望覆盖setter方法将该单个字符扩展为完整字符串。我知道我可以改变调用以返回完整的字符串，但API支持多个前端，我希望保持它们的一致性。这个plunker应该是我希望做的（没有涉及REST API）：Plunker example

登录项目的订阅功能时，不包括fullStatus：

this.service.get(id).subscribe(p => { 
    this.test = p;
    console.log(this.test);
});

在这里添加switch语句时，事情按预期工作，但是我希望将这个逻辑捆绑到Test类而不是subscribe函数中。

this.service.get(id).subscribe(p => {
    this.test = p;
    switch (this.test.status) {
      case 'A':
        this.test.fullStatus = 'Active';
        break;
      case 'I':
        this.test.fullStatus = 'Inactive';
        break;
      case 'N':
        this.test.fullStatus = 'No Certificate';
        break;
      default:
        this.test.fullStatus = '';
        break;
    }
    console.log(this.test);
  });

我有更好的方法来处理这个问题吗？提前谢谢。

Answer 1

在api调用后，您是否可以map结果fullStatus包含此// assuming you have to convert the response to json get(id) { return this.http.get(<url-to-get>).map((res) => { let test = res.json(); switch (this.test.status) { case 'A': test['fullStatus'] = 'Active'; break; case 'I': test['fullStatus'] = 'Inactive'; break; case 'N': test['fullStatus'] = 'No Certificate'; break; default: test['fullStatus'] = ''; break; } return test; // returns each response element with the new property 'fullStatus' added based on its 'status' }); }属性？

在您的服务中，

has_many, through:

然后您可以在组件类中订阅它。希望它有所帮助。

Answer 2

您可以创建一个测试类，如test-model.ts：

  export class Test {
      prop1 = ''; // dummy property (you can define these according to your need
      prop2 = '';

      status: string;
      fullStatus?: string; // optional 

      init(responseData: any){
        this.prop1 = responseData.prop1 ; 
        this.prop2 = responseData.prop2 ; 
        this.status = responseData.status;
        switch (responseData.status) {
              case 'A':
                  this.fullStatus = 'Active';
                  break;
              case 'I':
                   this.fullStatus = 'Inactive';
                   break;
              case 'N':
                 this.fullStatus = 'No Certificate';
                   break;
              default:
                 this.fullStatus = '';
                 break;
         }
      }
  }

在组件中：

  import {Test} from './test-model';

  export class TestComponent implements OnInit
  {
      test: Test = new Test();
      constructor(private service: MyService){}

      ngOnInit(){
        this.service.get(id).subscribe(p => {
          this.test.init(p);

          console.log(this.test);
        });
      }
   }

如何使用RxJS设置未包含在地图中的值？

2 个答案: