Question

我添加了两个模型。这些模型相互引用，我想从注释中获取数据。当我使用以下html代码时，一切都很好，但是代码不起作用：@ {{{comment.user？.name}}。请查看以下代码，如果您有任何指导原则，请告诉我？谢谢

**These two Models i am using in the source code: User and Comment**

import { Video } from './Videos';

export class User{


constructor(
   public id?:number,
  public name?:string,
    public type?: string,
    public video?: Video,
    public comment?: Comment){}
}



import { User } from './user';
import { Video } from './Videos';

export class Comment{


    constructor(
        id:number,
        userId: number,
        videoId:number,
        date:Date,
        body:string,
       user?:User[],
       video?:Video[] ){ }
}


**It is a component Ts source code :**


export class CommentslistComponent implements OnInit {


public comments:Comment[]=[];
  constructor(private videoService:VideoService)  { }

  ngOnInit() {

  this.videoService.getComments()
  .then((response) => {response.json()
  .then((res:Comment[])=>{
    this.comments=res;
    console.log(res);
    });
  })
  }


**HTML file where i want to display the data**

<li class="media" *ngFor="let comment of comments">
                            <a href="#" class="pull-left">
                                <img src="https://bootdey.com/img/Content/user_1.jpg" alt="" class="img-circle">
                            </a>
                            <div class="media-body">
                                <span class="text-muted pull-right">
                                    <small class="text-muted">{{comment.date}}</small>
                                </span>
                                <strong class="text-success" >   @{{comment.user?.name}}</strong>
                                <p>
                                   {{comment.body}}
                                </p>
                            </div>
                        </li>

期待您的回复。

Answer 1

您必须订阅可观察/承诺，而不是第二。用户是数组，因此您必须遍历用户数组

Answer 2

我假设您正在使用Angular的HttpClient来处理service.ts上的HTTP请求。

在component.ts上，您将需要使用document.location.reload()方法来返回可观测值，以便可以在组件内使用这些值。

如果您subscribe()，则可以检查值是否实际返回（而不是console.log(res)）

undefined

Answer 3

在Comment类中，您有user？：User []，这是User类型的数组。这就是{{comment.user?.name}} 无效。它将像{{comment.user[0]?.name}}一样访问。希望你能理解我的观点。因此，在HTML中，您可以将* ngFor用于comment.user，如下所示：

<li class="media" *ngFor="let comment of comments">
    <a href="#" class="pull-left">
        <img src="https://bootdey.com/img/Content/user_1.jpg" alt="" class="img-circle">
    </a>
    <div class="media-body">
        <span class="text-muted pull-right">
            <small class="text-muted">{{comment.date}}</small>
        </span>
        <strong class="text-success" *ngFor="let item of comments.user"> 
            {{item?.name}}
        </strong>
        <p>
            {{comment.body}}
        </p>
    </div>
</li>

希望这会有所帮助

角度参考模型并显示数据

3 个答案: