角度13-將傳入的json物件插入模型

使用 angular，我通過 api 獲取如下資料。一切都很好，但我無法將傳入的 json 物件放入模型中。我找不到我犯錯的地方。你能提供支持嗎？

 export class DialogBoxComponent implements OnInit {
   workflows: WorkflowListModel[] = [];


  constructor(
    public workflowService: WorkflowListService
  ) {
  }


  ngOnInit(): void {
    this.workflowService.getWorkflowDefinitions().subscribe(data => {
      this.workflows = data.items;
      console.log(this.workflows);
  });

 }

服務

public getWorkflowDefinitions(){
  let api = `${this.apiUrl}/services/workflows`;
  return this.httpClient.get<{items: WorkflowListModel[]}>(api).pipe(tap(x =>{
    this.loading = false;
    console.log();
  }));
}

模型

export class WorkflowListModel {
  id: string | any;
  definitionId: string | any;
  name: string | any;
  displayName: string | any;
  description: string | any;
  version: number | any;
  persistenceBehavior: string | any;
  isPublished: string | any;
  isLatest: string | any;
}

json結果

[
    {
        "id": "fb40d5c146644e58b05e2cb573409bbc",
        "definitionId": "336507c20553401f85d3b2b4e11a562c",
        "name": "demand",
        "displayName": "demand",
        "description": "demand",
        "version": 1,
        "isSingleton": false,
        "persistenceBehavior": "Suspended",
        "isPublished": true,
        "isLatest": true
    }
]

HTML

<input type="text" placeholder="{{action}}" matInput [formControl]="myControl"
       [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
  <mat-option *ngFor="let option of filteredOptions" [value]="option">
    {{option}}
  </mat-option>
</mat-autocomplete>

這樣一個json物件就來了，我可以訪問這個物件中的專案

 {
  "items": [
     {
        "id": "fb40d5c146644e58b05e2cb573409bbc",
        "definitionId": "336507c20553401f85d3b2b4e11a562c",
        "name": "demand",
        "displayName": "demand",
        "description": "demand",
        "version": 1,
        "isSingleton": false,
        "persistenceBehavior": "Suspended",
        "isPublished": true,
        "isLatest": true
    }
  ],
  "totalCount": 1
 }

uj5u.com熱心網友回復：

我首先要說你有一個非常奇怪的實作。

這在您的組件中：

public workflows: WorkflowListModel[] = [];

constructor(private workflowService: WorkflowListService) {
}

ngOnInit(): void {
    this.workflowService.getWorkflowDefinitions().subscribe(
        (data: WorkflowListModel[]) => this.workflows = data
    );
}

1. 該服務不應該是公開的，您不應該能夠從 HTML 模板訪問它，只能從組件訪問它。
2. 我會創建一個私有函式來獲取作業流并在ngOnInit()
3. 您可能希望在發生錯誤時進行錯誤處理

這適用于您的服務：

public getWorkflowDefinitions(): Observable<WorkflowListModel[]> {
    return this.httpClient.get<WorkflowListModel[]>(`${this.apiUrl}/services/workflows`);
}

1. 我使用了 observables，所以你可以檢索物件型別，你有一個我以前從未見過的奇怪實作
2. 您實際上是在檢索型別的物件，any因為您沒有指定任何內容
3. 當您只使用一次 API URL 時，為什么還要麻煩創建一個變數呢？

這在您的模型類中

export class WorkflowListModel {

   public id: any;
   public definitionId: any;
   public name: any;
   public displayName: any;
   public description: any;
   public version: any;
   public persistenceBehavior: any;
   public isPublished: any;
   public isLatest: any;

   constructor() {
   }
}

any表示任何型別，所以string | any它幾乎沒用，但我不會使用any，因為很可能只有數字和字串你正在使用它

標籤：json 有角度的

上一篇：Python回圈遍歷ndjson檔案資料

下一篇：為什么json_extract_scalar回傳null