Question

component.html

 <div class="row">
        <div class="col-12">
            <div class="messageRow">
                <div class="messageDevice"><img src="/assets/img/message_device.jpg" alt=""></div>
                <div class="messageInfo">
                    <h5>{{room.User.name}} - {{room.Item.title}}</h5>
                    <p>{{room.last_message}}.</p>
                    <div class="messageDateTime forMobile">{{room.updatedAt | date:'d MMM y, h:mm:ss a'}}</div>
                </div>
                <div class="messageDateTime">
                    <a href="#" class="deleteBtn"><img src="/assets/img/delete.svg" alt="" class="mr-2" />Delete</a>
                </div>
            </div>
        </div>
    </div>

模型

import { Message } from './message';
export class Room {
    id: number;
    item_id: number;
    last_message: string;
    last_message_sender_id: number;
    receiver_id: number;
    sender_id: number;
    createdAt: string;
    updatedAt: string;
    Messages: Message[];
    Item: {
        title: string,
        image1: string;
    };
    User: {
        name: string; 
    }
}

component.ts

import { Component, OnInit } from '@angular/core';
import { HeaderService } from '../../header/header.service';
import { ToastrService } from 'ngx-toastr';
import { MessagesService } from 'src/app/services';
import { Room } from 'src/app/models';
import { ActivatedRoute } from '@angular/router';
import { AuthService } from 'src/app/auth/auth.service';

@Component({
    selector: 'app-message-view',
    templateUrl: './message-view.component.html',
    styleUrls: ['./message-view.component.css']
})
export class MessageViewComponent implements OnInit {

    room: Room =  new Room();
    constructor(
        private headerService: HeaderService,
        private messagesService: MessagesService,
        private toastr: ToastrService,
        private route: ActivatedRoute,
        private authService: AuthService,
    ) { }

    ngOnInit() {
        this.headerService.setHeader('internal');
        const id = this.route.snapshot.paramMap.get('id');
        this.messagesService.messageData(id).subscribe(data => {
            this.room = data.messageData;
        },
            error => {
                this.toastr.error(error.message, '');
            }
        );
    }

    get getUser() { return this.authService.getUser(); }
}

Api响应消息数据

 {
  "messageData": {
    "id": 1,
    "sender_id": 2,
    "receiver_id": 3,
    "item_id": 1,
    "last_message": "thank you so much",
    "last_message_sender_id": 3,
    "createdAt": "2019-10-30T00:00:00.000Z",
    "updatedAt": "2019-10-30T00:00:00.000Z",
    "Messages": [
      {
        "id": 1,
        "room_id": 1,
        "sender_id": 2,
        "message": "what a great product",
        "createdAt": "2019-10-30T00:00:00.000Z",
        "updatedAt": "2019-10-30T00:00:00.000Z"
      },
      {
        "id": 2,
        "room_id": 1,
        "sender_id": 3,
        "message": "thank you so much",
        "createdAt": "2019-10-30T00:00:00.000Z",
        "updatedAt": "2019-10-30T00:00:00.000Z"
      }
    ],
    "Item": {
      "title": "Iphone",
      "image1": "15719085927991gohz250uk24hsgps.jpg"
    },
    "User": {
      "name": "test user"
    }
  },
  "status": true,
  "message": "success"
}

Answer 1

您需要在初始化Room Class时启动用户，否则将因为错误提示而未定义

错误TypeError：“ _ co.room.User未定义”-角度8

1 个答案: