1
votes

Impossible d'accéder aux données d'interface enfant à partir de l'API en angulaire. Qu'est-ce que je fais mal?

Nouveau sur Angular 7 ici et besoin d'aide. J'ai donc un flux JSON qui ressemble à ceci:

[Authorize]
[Route("api/[controller]")]
[ApiController]
public class CompanyController : ControllerBase
{
    [HttpGet("{id}")]
    public async Task<IActionResult> Company(int id)
    {
        var company = await _repo.GetCompany(id);
        var companyToReturn = _mapper.Map<CompanyForContactDto>(company);
        return Ok(companyToReturn);
    }
}

company.ts & companyaddress.ts: J'ai créé deux interfaces dans Angular comme ceci:

<div><h3>{{company.Name}}</h3>
<p>
    <div *ngFor="let addy of company.CompanyAddress">
        {{addy.Address1}}
    </div>
</p>    
</div>

angular json interface

4 commentaires

Veuillez ajouter votre code de modèle.

Veuillez ajouter à votre modèle le code et la valeur de l'objet this.company .

company.CompanyAddress.Address1 , dans ce cas, l'adresse de l'entreprise est un tableau à droite, vous ne devriez donc pas y accéder comme company.CompanyAddress [index] .Address1?

@emkay J'ai donné une chance à cela en utilisant {{CompanyAddress [1] .Address1}}. Malheureusement, aucune donnée n'a été renvoyée.

3 Réponses :

1
votes

Tout va bien dans votre côté service et côté composant. Je pense que vous obtenez cette erreur parce que lorsque vous accédez à votre page (modèle), vous essayez de rendre la variable company avant la réponse de votre service.

Et ma prédiction est que vous n'utilisez pas * ngIf de votre côté modèle,

Par exemple,

<div *ngIf="company && company.CompanyAddress">
 <h3>{{company.Name}}</h3>
  <p>
    <div *ngFor="let addy of company.CompanyAddress">
        {{addy.Address1}}
    </div>
  </p>    
</div>

J'ai répondu question SO similaire demain, veuillez vérifier . J'espère que cela vous aidera.

MISE À JOUR:

Veuillez essayer ceci,

<div *ngIf="emp1">
  Id:{{emp1.id}} Name: {{emp1.name}}
</div>
<div *ngIf="emp2">
  Id:{{emp2.id}} Name: {{emp2.name}}
</div>

3 commentaires

Êtes-vous en train de dire qu'aucune donnée n'a encore été chargée et que c'est pourquoi rien ne se passe? Je récupère le nom de l'entreprise. L'autre chose étrange est que l'intellisense de Visual Code ne voit pas non plus CompanyAddress.properties.

@ ThaKiddKG5ORD Oui, c'est ce à quoi je pense. Pouvez-vous s'il vous plaît ajouter la notation * ngIf sur votre modèle? Au fait, je vérifie les classes que vous avez utilisées.

J'ai ajouté la déclaration * ngIf que vous avez recommandée. Rien ne charge. Si je supprime company.CompanyAddress de ngIf, tout se charge à l'exception du bloc d'adresse (ngFor).

1
votes

@ThaKidd KG5ORD, essayez ceci

Je pense que votre objet JSON convient à la première interface mais dans le dans le cas des données de l ' interface enfant , elles ne sont pas converties en objet JSON . Peut-être que c'est encore une chaîne alors, faites quelques changements comme ci-dessous

ajouter une méthode dans Component.ts

<div *ngFor="let addy of ConvertToJSON(company.CompanyAddress)">
        {{addy.Address1}}
</div>

ConvertToJSON(product: any) {
    return JSON.parse(product);
}

J'ai répondu à un type similaire de question ici vérifier une fois .

4 commentaires

Malheureusement, cela n'a pas résolu le problème. Question secondaire stupide ... y a-t-il un moyen d'évaluer quelles données se trouvent dans l'interface de l'entreprise?

En fait, je viens de remarquer que je reçois ceci dans mon navigateur: ERROR SyntaxError: jeton inattendu o dans JSON à la position 1 à JSON.parse (). Je ne sais pas ce que cela signifie, mais Google le fera.

@ThaKidd KG5ORD, nous devons convertir le tableau en objet JSON donc, essayez ce changement dans la méthode ConvertToJSON () JSON.parse en JSON.stringify

Changé en stringify. Maintenant, j'obtiens cette erreur: Impossible de trouver un objet de support différent [{"Id": 22, "CompanyId": 24, "Address1": "898 Greene ...

0
votes

Je l'ai compris! Le problème a été résolu en ajoutant ce qui suit au-dessus du contrôleur de l'API ASP.Net Core: [Produces("application/json") convenient

{{company.CompanyAddress[1].Address1}}

Après cela , J'ai changé mon composant HTML de nouveau comme suit:

<div><h3>{{company.Name}}</h3> <p> <div *ngFor="let addy of company.CompanyAddress"> {{addy.Address1}} </div> </p> </div>

Merci à tous de m'avoir mis sur la bonne voie d'un mauvais Json Get. Cela a également commencé à fonctionner après le changement:

[Authorize] [Produces("application/json")] [Route("api/[controller]")] [ApiController] public class CompanyController : ControllerBase { [HttpGet("{id}")] public async Task<IActionResult> Company(int id) { var company = await _repo.GetCompany(id); var companyToReturn = _mapper.Map<CompanyForContactDto>(company); return Ok(companyToReturn); } }

1 commentaires

Bien, mais vous devez toujours utiliser la notation * ngIf: D Sinon, vous rencontrerez des problèmes différents, bonne chance.