如何以角度显示单个json对象

Question

我从 API 获取 Json 对象并尝试显示它，但我不能 这是我的组件：

  selector: 'app-links-page-detail',
  templateUrl: './links-page-detail.component.html',
  styleUrls: ['./links-page-detail.component.scss']
})
export class LinksPageDetailComponent implements OnInit {

  public link: Observable<Links[]>;
  public updatedLink: Observable<Links[]>;
  public linkName: string;
  showSpinner: boolean = true;
  disallowEdit: boolean = true;

  constructor(private _linksService: LinksService,private route: ActivatedRoute, private router: Router) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe((params: ParamMap) => {
      let name = params.get('name');
      this.linkName = name;
    });
    this.link = this._linksService.getLinkDetail(this.linkName);
    this.link.subscribe(() => this.showSpinner = false);

  }

这是我的 html 模板：

    <label for="ID" class="labels">ID</label><br>
    <input type="text" class="inputs" id="ID" [readOnly]="true" name="id" value="{{link.resp._id}}"><br>

    <label for="createdOn" class="labels">Created On</label><br>
    <input type="text" class="inputs" id="createdOn" [readOnly]="true" name="createdOn" value="{{link.createdOn}}"><br>

    <label for="createdBy" class="labels">Created By</label><br>
    <input type="text" class="inputs" id="createdBy" [readOnly]="true" name="createdOn" value="{{link.createdBy}}"><br>

    <label for="updateOn" class="labels">Update On</label><br>
    <input type="text" class="inputs" id="updateOn" [readOnly]="true" name="createdBy" value="{{link.updateOn}}"><br>

    <label for="updateBy" class="labels">Update By</label><br>
    <input type="text" class="inputs" id="updateBy" [readOnly]="true" name="updateBy" value="{{link.updateBy}}"><br>

    <label for="name" class="labels">Name</label><br>
    <input type="text" class="inputs"  id="name" [readOnly]="true" name="name" [ngModel]="link.name"><br>

    <label for="link" class="labels">Link</label><br>
    <input type="text" class="inputs" id="link" [readOnly]="disallowEdit" name="link" [ngModel]="link.link"><br>

    <label for="username" class="labels">Username</label><br>
    <input type="text" class="inputs" id="username" [readOnly]="disallowEdit" name="username" [ngModel]="link.username"><br>

    <label for="password" class="labels">Password</label><br>
    <input type="text" class="inputs" id="password" [readOnly]="disallowEdit" name="password" [ngModel]="link.password"><br>

    <label for="integrationType" class="labels">Integration Type</label><br>
    <select class="inputs" id="integrationType" name="integrationType" [ngModel]="link.integrationType" *ngIf="!disallowEdit">
        <option value="REST">REST</option>
        <option value="SOAP">SOAP</option>
        <option value="MYSQL">MYSQL</option>
    </select>
    <input type="text" class="inputs" id="integrationType" [readOnly]="disallowEdit" name="integrationType" [ngModel]="link.integrationType" *ngIf="disallowEdit"><br>

    <label for="method" class="labels">Method</label><br>
    <input type="text" class="inputs" id="method" [readOnly]="disallowEdit" name="method" [ngModel]="link.method"><br>

    <label for="requestBody" class="labels">Request Body</label><br>
    <input type="text" class="inputs" id="requestBody" [readOnly]="disallowEdit" name="requestBody" [ngModel]="link.requestBody"><br>

    <input type="reset" value="Cancel" class="inputButtons" [hidden]="disallowEdit" (click)="disAllowEditing()">

    <input type="submit" value="Save" class="inputButtons" [hidden]="disallowEdit">
</form>

我知道 ngFor 只接受数组，所以我尝试这样做：

    this.route.paramMap.subscribe((params: ParamMap) => {
      let name = params.get('name');
      this.linkName = name;
    });
    this.link = this._linksService.getLinkDetail(this.linkName);
    this.link.subscribe(() => this.showSpinner = false);
    this.link = [this.link];
  }

但我收到此错误：类型“Observable[]”缺少类型“Observable”中的以下属性：_isScalar、source、operator、lift 和 5 more.ts(第2740章

Answer 1

这是我的首选方法：

<ng-container *ngIf="link | asynk as link; else spinner">
// link is a resolved json object here, use it as you like. 
// and by using async pipe you don't have to worry about subscriptions and unsubscribing
</ng-container>

<ng-template #spinner>I'm spinning</ng-template>

Answer 2

这里你的 link 变量是 Observable 并且你不能直接在模板中绑定 Observable 属性。 你必须订阅 Observable 然后设置link 值

  public link: Links[];
  public linkName: string;

  constructor(private _linksService: LinksService,private route: ActivatedRoute, private router: Router) { }

  ngOnInit(): void {
    this.route.paramMap.subscribe((params: ParamMap) => {
      let name = params.get('name');
      this.linkName = name;
    });

    this._linksService.getLinkDetail(this.linkName).subscribe(res=>{
      this.link = res;
      this.showSpinner = false
    });
  }

并像这样在模板中绑定link：-

<input type="text" class="inputs" id="ID" [readOnly]="true" name="id" [value]="link.resp._id"><br>

注意 - 不要忘记取消订阅 Observable。

Answer 3

@Component({
  selector: 'json-pipe',
  template: `<div>
    <p>Without JSON pipe:</p>
    <pre>{{object}}</pre>
    <p>With JSON pipe:</p>
    <pre>{{object | json}}</pre>
  </div>`
})
export class JsonPipeComponent {
  object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}};
}