Question

我想将@Input（）发送到两个不同的组件：一个是列表项，另一个是项详细信息。他们应该或多或少使用相同的属性。

我尝试使用不同的服务发送带有和不带有Observable和Subscribe的相同输入，但是当我尝试显示项目详细信息组件时，总是收到相同的错误消息：“无法读取属性”属性“ of undefined” 。列表项工作正常。

这是我的代码：

列出HTML：

<div class="container list-group">
  <a *ngFor="let actu of actus" class="list-group-item list-group-item-action flex-column align-items-start" [routerLink]="['/article', actu.id]">
    <app-item-actus [actu]="actu"></app-item-actus>
  </a>
  <div *ngFor="let actu of actus" class="hide">
    <app-actu-detail [article]="actu" class="hide"></app-actu-detail>
  </div>
  <br>
</div>

在这里，我尝试使用隐藏的* ngFor将我的物品发送到详细信息（class =“ hide”是显示内容：无）。

列出TS：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

import { ActuService } from 'src/app/services/actu.service';
import { Actu } from '../../../modeles/actu';

@Component({
  selector: 'app-liste-actus',
  templateUrl: './liste-actus.component.html',
  styleUrls: ['./liste-actus.component.css']
})

export class ListeActusComponent implements OnInit {

  actus: Actu[];

  constructor(private actuService: ActuService) { 
  }

  ngOnInit() {
    this.actuService.getActusList().subscribe(data => { this.actus = data; });
  }
}

我没有使用Observable来检查结果是否相同，但是似乎没有变化。

项目详细信息HTML

<div>
  <h2>{{article.titre}}</h2>
  <br>
  <blockquote *ngIf="article.exergue"><i>{{article.exergue}}</i> 
  </blockquote>
  <br>
  <figure>
    <img *ngIf="article.image" src="{{article.image}}" alt="image article">
    <figcaption>{{article.legendeImage}}</figcaption>
  </figure>
  <br>
  <p *ngIf="article.paragraphe1">{{article.paragraphe1}}</p>
  <br>
  <h4 *ngIf="article.intertitre1">{{article.intertitre1}}</h4>
  <br>
  <p *ngIf="article.paragraphe2">{{article.paragraphe2}}</p>
  <br>
  <h4 *ngIf="article.intertitre2">{{article.intertitre2}}</h4>
  <br>
  <p *ngIf="article.paragraphe3">{{article.paragraphe3}}</p>
  <br>
</div>

这是我的项目详细信息HTML，它与我的列表项大致相同，但要显示更多属性。

商品详情TS

import { Component, OnInit, Input } from '@angular/core';

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

  @Input() article: any;

  constructor() { }

  ngOnInit() {
  }

}

我使用spring生成的项目+ mysql作为后台数据库，我是编码领域的新手，所以我可能在某个地方犯了一些大错误，但我不知道在哪里。

预先感谢您对我的问题的帮助。

Answer 1

我认为您应该添加* ngIf来确保在循环之前定义数据：

<div class="container list-group" *ngIf="actus">
...
</div>

如果要在获取数据时避免出现白屏，则必须使用解析器https://angular.io/api/router/Resolve

Answer 2

发生问题是因为在安装组件时，传递给组件的属性是不确定的，因此您无法访问未定义的属性。您可以解决此问题，将默认值添加到组件的输入中：

在[ { "$match": { "asunto": { "$exists": true }, "asunto": { "$ne": null }, "tiempos": { "$exists": true }, "tiempos": { "$ne": null }, "problemas": { "$exists": true }, "creado": { "$exists": true }, "estado_actual": { "$exists": true }, "estado_actual.estado": { "$eq": "Cerrado" }, "asuntoCierre": { "$ne": "Cierre Automatico" } } }, { "$project": { "pFecha": { "$dateToString": { "format": "%Y-%m-%d %H:%M", "date": "$creado.lastEvent_tc", "timezone": "-03:00" } }, "asunto": 1, "tiempos": 1, "nroTkt": 1, "estado_actual": 1, "fechaCierre": { "$dateToString": { "format": "%Y-%m-%d %H:%M", "date": "$cerrado.lastEvent_tc", "timezone": "-03:00" } }, "losProblemas": { "$arrayElemAt": ["$problemas", 0] }, "primera": { "$cond": [ { "$eq": ["$tipoCreado", "Manual"] }, { "$arrayElemAt": ["$tiempos", 0] }, { "$arrayElemAt": ["$tiempos", 1] } ] } } }, { "$addFields": { "lacola": { "$toObjectId": "$primera.cola" } } }, { "$lookup": { "from": "moicaTicketsColas", "localField": "lacola", "foreignField": "_id", "as": "nombreCola" } } ]中：

app-item-actus

还在@Input() actu: any = {};中，您将发送一个名为app-actu-detail的道具：因此您应该收到以下消息：

[article]

如何将@Input发送到多个组件？

2 个答案: