Angular 6 проблемы с пониманием, почему моя привязка данных неверна - PullRequest
Новая
       33

Angular 6 проблемы с пониманием, почему моя привязка данных неверна

0 голосов
/ 03 марта 2019

Доброе утро,

Я новичок с angular 6 и создаю персональный сайт с Angular + NodeJs.

Я строю интерфейс с 2 секциями по 3 кнопки, каждая кнопка запускает модальный заголовок (название кнопки) и тело (массив абзацев с содержимым).Такая информация, как заголовок раздела, имя кнопки, модальное тело, отправляется сервером узла в виде строки JSON.

Все отлично работает на стороне сервера.строка JSON хорошо отправляется, когда мой сервис на лицевой стороне выполняет запрос.Названия кнопок хорошо отображаются на экране, также как и модальное название, но не модальное тело, которое отказывается отображаться.

Я хотел бы понять, почему мой модальный заголовок отображается правильно, но не мой модальный контекст, хотя мне кажется, что я использую один и тот же код, чтобы показать их оба.Я думаю, что мне не хватает большой проблемы с привязкой данных.

мой json: 

[
    {id:1, title: "section title ...", buttons:[
      {
        id:1,
        text:"Button title 1",
        paraphs:[
          {id:1, content:"paraph1"},
          {id:2, content:"paraph2"}
        ]
      },
      {id:2, text:"Button title 2"},
      {id:3, text:"Button title 3"}
    ]},
    {id:2, title: "Section title 2", buttons:[
      {id:1, text:"Button title 1"},
      {id:2, text:"Button title 2"},
      {id:3, text:"Button title 3"}
    ]}
  ]

мой component.html: 

<div class="container spacer" >
  <div *ngFor="let section of sections">
    <div>
        <p class="fontPacifico_white">{{section.title}}</p>
    </div>
    <div style="display:flex; flex-direction: row;justify-content: center; min-height: 250px;">
        <button class="section_button" type="button" *ngFor="let button of section.buttons" data-toggle="modal" data-target="#exampleModal" (click)="this.handleClick(button.text, button.paraphs)">{{button.text}}</button>
     </div>
  </div>
    <app-footer></app-footer>
</div>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">{{modal_title}}</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" ngFor="let paraph of paraphs" *ngIf="!paraphs==undefined">
            <p>{{paraph.content}}</p>
        </div>
        <div class="modal-footer">

        </div>
      </div>
    </div>
  </div>

мой component.ts: 

import { Component, OnInit } from '@angular/core';
import { PrestationService} from '../service/prestation.service'

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


  sections;
  modal_title;
  paraphs;


  constructor(private ps:PrestationService) { }

  ngOnInit() {
    this.ps.getPrestation().subscribe(
      data => this.sections = data
    )
  }

  handleClick(buttonTitle, buttonContent){
    this.modal_title = buttonTitle;
    this.paraphs = buttonContent;
  }



}

1 Ответ

0 голосов
/ 03 марта 2019

Здесь есть несколько неправильных вещей: 

<div class="modal-body" ngFor="let paraph of paraphs" *ngIf="!paraphs==undefined">
  <p>{{paraph.content}}</p>
</div>
  1. Ваш ngFor отсутствует * (должно быть *ngFor)
  2. Вы не можетесмешивать несколько структурных директив на одном элементе (*ngFor и *ngIf)
  3. Ваше условие ... довольно странное и, вероятно, никогда не выполняется (отрицание массива должно быть falseи false == undefined также дает false).

Возможно, вам следует просто отбросить *ngIf в целом, поскольку пустой массив никогда не будет повторяться в любом случае: 

<div class="modal-body" *ngFor="let paraph of paraphs">
  <p>{{paraph.content}}</p>
</div>
...