Angular 不显示表格数据

Question

我有简单的html：

<div class="dialogs">
  <div id="wrapper" >
    <p>{{createTestingConstant()}}</p>
        <ng-container *ngFor="let one of contacts">
          <p>{{one.NickName | json }}</p>
        </ng-container>
  </div>
</div>

在这里，我尝试打印函数的结果以及表格中的每个刻痕。

ts：

@Component({
  selector: 'app-get-chat',
  templateUrl: './get-chat.component.html',
  styleUrls: ['./get-chat.component.scss'],
})
export class GetChatComponent implements OnInit {
  contacts: Contact[];
  constructor(private contactService: ContactService) {}

  ngOnInit(): void {
    this.contactService.getAll().subscribe((_) => {
      this.contacts = _;
    });
  }

其实功能：

  createTestingConstant(): bigInt.BigInteger {
    return bigInt(1);
  }
}

服务：

@Injectable({
  providedIn: 'root',
})
export class ContactService {
  private url = environment.apiUrl + '/contact';

  constructor(private http: HttpClient) {}

  public getAll(): Observable<Contact[]> {
    return this.http.get<Contact[]>(this.url);
  }


  public create(request: CreateContactRequest): Observable<void> {
    return this.http.post<void>(this.url, request);
  }
}

结果：

但是如果我尝试简化一下：

<div class="dialogs">
  <div id="wrapper" >
    <p>{{createTestingConstant()}}</p>
        <ng-container *ngFor="let one of contacts">
          <p>{{one | json }}</p>
        </ng-container>
  </div>
</div>

结果实际出现：

问题：为什么我可以从表中获取所有数据，但不能获取一个属性，以及如何仅获取它？

感谢您的帮助。

Answer 1

昵称上的错别字，就是这样

<div class="dialogs">
  <div id="wrapper" >
    <p>{{createTestingConstant()}}</p>
        <ng-container *ngFor="let one of contacts">
          <p>{{one.nickName | json }}</p>
        </ng-container>
  </div>
</div>