मैं अपने मूल्यों को बाध्य करने के लिए थोड़ा तर्क बनाने की कोशिश कर रहा हूं ताकि आवश्यक मूल्य हमेशा प्रदर्शित हो। मेरे पास अभी जो समस्या है वह यह है कि मैं 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();
  }
}

तो अभी मेरे कॉम्पोनेन्ट.एचटीएमएल में "प्रूफ:" लेबल के साथ सेलेक्ट स्टेटमेंट में मैं नीचे प्रत्येक ऑप्शन वैल्यू को {{theorem.rule}} : {{theorem.name}} पर सेट कर रहा हूं। लेकिन, कुछ मामलों में {{theorem.name}} खाली है, और इस मामले में मैं इसके बजाय {{theorem.description}} प्रदर्शित करना चाहता हूं। ऐसा करने का सबसे अच्छा तरीका क्या है और इसे कैसे किया जा सकता है?

2
FrankTheTank 3 अप्रैल 2018, 17:58

3 जवाब

सबसे बढ़िया उत्तर

यह बहुत आसान है: आप केवल || ("या" ऑपरेटर) का उपयोग कर सकते हैं।

{{theorem.name || theorem.description}}
1
Commercial Suicide 3 अप्रैल 2018, 15:04

कृपया कोड परिवर्तनों पर एक नज़र डालें

    <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>
1
Kalleshwar Kalshetty 3 अप्रैल 2018, 15:03

यह जांचने के लिए टर्नरी का प्रयास करें कि क्या theorem.name को परिभाषित नहीं किया गया है, यदि कोई प्रदर्शन theorem.description नहीं है:

{{ theorem.name ? theorem.name : theorem.description}}
1
Fateh Mohamed 3 अप्रैल 2018, 15:03