Angular: запись логики в привязку

Я пытаюсь сделать небольшую логику для привязки моих значений, чтобы всегда отображалось необходимое значение. Проблема, с которой я столкнулся прямо сейчас, заключается в том, что я привязываюсь к Theorem.name, но иногда этого не существует, и в этом случае мне нужно вместо этого отобразить Theorem.description. Как лучше всего реализовать эту логику и какой должна быть указанная логика? Мой код выглядит следующим образом:

editor-form.component.html

<div *ngIf = "!infoFilled">
  <form>
    <fieldset>
      <legend>Editor Form</legend>
      <div class = "form-group">
        <label>Name:</label>
        <input [(ngModel)] = "nameText" type = "text" name = "proof" value = "" class = "form-control">
      </div>
      <div class = "form-group">
        <label>Class:</label>
        <input [(ngModel)] = "classText" type = "text" name = "class" value = "" class = "form-control">
      </div>
      <div class = "form-group">
        <label>Proof:</label>
        <select (change) = "onProofSelectionChanged($event.target.value)" [(ngModel)] = "proofText" name = "proofs" class = "form-control">
          <option style = "display:none" value = ""></option>
          <option value = "custom">[Custom]</option>
          <option *ngFor = "let theorem of (theorems$ | async)" [ngValue] = "'(' + theorem.rule + ') ' + theorem.name">
            {{theorem.rule}}: {{theorem.name}}
          </option>
        </select>
        <input [hidden] = "!customProofSelected" type = "text" class = "form-control">
      </div>
      <div class = "form-group">
        <label>Description:</label>
        <textarea
          [(ngModel)] = "descriptionText"
          name = "description"
          cols = "30" rows = "5"
          class = "form-control"
          placeholder = "Proof by mathematical induction... "></textarea>
      </div>
    </fieldset>
    <button (click) = "formSubmit()" class = "btn btn-primary">Generate Editor</button>
  </form>
</div>

editor-form.component.ts

import {Component, OnDestroy, OnInit} from '@angular/core';
import {EditorService} from '../editor/editor.service';
import {BibleService} from '../bible/bible.service';
import {Theorem} from '../../model/theorem';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'app-editor-form',
  templateUrl: './editor-form.component.html',
  styleUrls: ['./editor-form.component.scss']
})
export class EditorFormComponent implements OnInit, OnDestroy {

  nameText = '';
  classText = '';
  proofText = '';
  descriptionText = '';
  infoFilled: boolean;
  infoFilledSubscription;
  customProofSelected = false;
  theorems$: Observable<Theorem[]>;

  constructor(private editorService: EditorService, private bibleService: BibleService) {
    this.infoFilledSubscription = this.editorService.infoFilledChange.subscribe(infoFilled => {
      this.infoFilled = infoFilled;
    });
  }

  formSubmit() {
    this.editorService.toggleFormFilled();
    const outline =
      ('Name: ').bold() +  this.nameText + '<br />' +
      ('Class: ').bold() + this.classText + '<br />' +
      ('Proof: ').bold() + this.proofText + '<br /><br />' +
      ('Solution: ').bold() +  '<br />' +
      this.descriptionText;
    this.editorService.submitData(outline);
  }

  onProofSelectionChanged(selection) {
    if (selection === 'custom') {
      this.customProofSelected = true;
    } else {
      this.customProofSelected = false;
    }
  }

  ngOnInit() {
    this.theorems$ = this.bibleService.findAllTheorems();
  }

  ngOnDestroy() {
    this.infoFilledSubscription.unsubscribe();
  }
}

Итак, прямо сейчас в моем component.html в операторе select с меткой «Доказательство:» я устанавливаю значение каждого параметра внизу на {{Theorem.rule}}: {{Theorem.name}}. Но в некоторых случаях {{Theorem.name}} пусто, и в этом случае я хочу вместо этого отобразить {{Theorem.description}}. Как лучше всего это сделать и как это сделать?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
60
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

попробуйте тернарно, чтобы проверить, определено ли имя теоремы как no, если нет отображения Theorem.description:

{{ theorem.name ? theorem.name : theorem.description}}

пожалуйста, посмотрите на изменения кода

    <div *ngIf = "!infoFilled">
  <form>
    <fieldset>
      <legend>Editor Form</legend>
      <div class = "form-group">
        <label>Name:</label>
        <input [(ngModel)] = "nameText" type = "text" name = "proof" value = "" class = "form-control">
      </div>
      <div class = "form-group">
        <label>Class:</label>
        <input [(ngModel)] = "classText" type = "text" name = "class" value = "" class = "form-control">
      </div>
      <div class = "form-group">
        <label>Proof:</label>
        <select (change) = "onProofSelectionChanged($event.target.value)" [(ngModel)] = "proofText" name = "proofs" class = "form-control">
          <option style = "display:none" value = ""></option>
          <option value = "custom">[Custom]</option>
          <option *ngFor = "let theorem of (theorems$ | async)" [ngValue] = "'(' + theorem.rule + ') ' + theorem.name">
            {{theorem.rule}}: **<span *ngIf = "theorem.name">{{theorem.name}}</span><span *ngIf = "!theorem.name">{{theorem.description}}</span>**
          </option>
        </select>
        <input [hidden] = "!customProofSelected" type = "text" class = "form-control">
      </div>
      <div class = "form-group">
        <label>Description:</label>
        <textarea
          [(ngModel)] = "descriptionText"
          name = "description"
          cols = "30" rows = "5"
          class = "form-control"
          placeholder = "Proof by mathematical induction... "></textarea>
      </div>
    </fieldset>
    <button (click) = "formSubmit()" class = "btn btn-primary">Generate Editor</button>
  </form>
</div>
Ответ принят как подходящий

Это очень просто: вы можете просто использовать || (оператор «или»).

{{theorem.name || theorem.description}}

Попробуй использовать

{{ !theorem.name ? theorem.description : theorem.name}}

Другие вопросы по теме