Question

我一直在尝试创建一个在Angular应用程序中使用的全局组件，它基本上应该只获取来自数据库的对象数组并在html中显示其内容。但是，html永远不会加载。 Angular认为该模型为空。如果我在它上面执行console.log，我可以看到它具有正确的属性，所以它显然不是null。

我认为这可能是因为我从数据库中获取数据，因此当它首先加载其null并且在数据到达时它不会更新。

非常感谢任何帮助。这是代码：

全球活动组件：

@Component({
    selector: 'ag-events',
    templateUrl: './Event.html',
    styles: [require('./Event.scss').toString()]})

export class EventListComponent {
    // Default values
    @Input() public model: EventList = <EventList>{};
}

自定义页面组件

@Component({
    selector: 'planner-team-events',
    templateUrl: './TeamEvents.html',
    styleUrls: ['./TeamEvents.scss']
})
export class TeamEventsComponent implements OnInit {
    public model: EventList = <EventList>{};

    constructor(private net: NetworkService) { }

    ngOnInit(): void {          
        this.net.get<EventList>(`Event/GetPlannerEvents/`).subscribe(t => {

            // Here i populate the model from Database
            this.model = t;

            console.log(this.model);
        }
    }
}

HTML Usage（Global EventComponent）

<div class="event-wrapper"  *ngFor="let model of model.eventList">
    <div class="event">
        <div class="event-image">
            <img src={{model.eventImage.link}} />
            <div class="banner">
                <h5>{{model.event.name}}</h5>
            </div>
        </div>
    </div>
</div>

HTML使用（在TeamEvents.html下）

 <ag-events [model]="model"></ag-events>

最后，我的模特：

export interface EventList {
    eventList:EventViewModel[];
}

export interface EventViewModel {
    event: Event;
    eventImage: AngularImage;
    category: EventCategory;
    type:EventType;
    color: Color;

    campus: Organization;
    campusImage: AngularImage;
    juniorOrg: Organization;
    juniorOrgImage: AngularImage;
}

根据需要，数据库json响应：

{
 "events": [
  {
   "event": {
    "id": 8,
    "name": "Legal",
    "description": "Dwqdwqdwqd",
    "imageId": 20,
    "categoryId": 3,
    "typeId": 3,
    "universityId": 1,
    "campusId": 3,
    "juniorOrgId": 7,
    "price": 0,
    "pinned": false,
    "link": null,
    "startDate": "2018-07-18T10:45:00",
    "endDate": "2018-08-21T16:40:00",
    "approvedOn": null,
    "approvedBy": null,
   },
   "eventImage": {
    "link": "https://s3-sa-east-1.amazonaws.com/",
    "base64String": null,
    "mimeType": "image/jpeg"
   },
   "campus": {
    "id": 3,
    "organizationTypeId": 2,
    "name": "FT",
    "abbreviation": "AC",
    "description": null,
    "imageId": 14,
    "addressId": null,
    "identifier": null,
    "approvedOn": null,
    "approvedBy": null,
    "contactId": null,
    "parentId": 1,
    "children": null
   },
   "campusImage": {
    "link": "https://s3-sa-east-1.amazonaws.com",
    "base64String": null,
    "mimeType": "image/jpeg"
   },
   "juniorOrg": {
    "id": 7,
    "organizationTypeId": 3,
    "name": "MTE",
    "abbreviation": "JCA",
    "description": null,
    "imageId": 14,
    "addressId": null,
    "identifier": null,
    "approvedOn": null,
    "approvedBy": null,
    "contactId": null,
    "parentId": 3,,
    "children": null
   },
   "juniorOrgImage": {
    "link": "https://s3-sa-east-1.amazonaws.com/",
    "base64String": null,
    "mimeType": "image/jpeg"
   },
   "category": {
    "id": 3,
    "name": "Engenharia",
    "colorId": 1,
   },
   "categoryColor": {
    "id": 1,
    "name": "Black",
    "hex": "#000000",
    "rgb": "rgb(0,0,0)"
   },
   "type": {
    "id": 3,
    "name": "Workshop"
   }
  }
 ]
}

Angular 4组件绑定不起作用

0 个答案: