TypeScript - איך אני מממש רשימת בחירה מלאה בנתונים עם Angular 6


אני חדש ב-Angular 6, או בעצם רק ב-Angular באופן כללי. אני רוצה לשים רשימת בחירה בעמוד שלי שתתמלא בערכים שאני מקבל מבקשת JSON במקום אחר. איך אני אקדם משימה זו?

תשובה #1

 // http request with your server data.
 options$ = this.yourHttpService.getOptions(API);  // returns an Observable

נניח שהפורמט הוא JSON (נפעיל את option.value ב-HTML):

{
    value: 'Option1',
    otherValue: '....'
}

בקובץ ה-HTML שלך, מלא את האפשרויות עם async:

    <select [(ngModel)]="yourOption" id="category">
       <option value="" disabled selected>>select an option</option>
       <option *ngFor="let option of options$ | async" [value]="option.value">{item.category}}</option>
     </select>

תשובה #2

בהנחה שהנתונים שלך שצריך להכניס לרשימת הנפתחות הם בעצם מערך:

 myData = {data: [v1, v2, v3, v4]};

בקובץ component.html שלך

<select>
  <option *ngFor="let eachVal of myData['data']>
          {{eachVal}}
  </option>
</select>

אמור לעשות את הטריק.

מאז שאתה לא מספק את קוד הקטע שלך, יש לי דוגמת StackBlitz שמשתמשת בתגיות select ו-option עם Angular. תסתכל עליהן.