Problem with Multi-List

Ionic Framework ionic-v3
1

Hi guys,
I can’t solve a problem with my multi-list: I have three different arrays I use for ion-items: course, description and percentage. But instead of percentage, the course is showed on the right.

This is home.html

<br>

<h2>Willkommen!</h2>

<p>
    Das wird die Seite, auf der die eigenen Kurse dargestellt werden.
</p>

<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar>

<ion-list>
    
    <ion-item *ngFor="let course of courses; let description of descriptions; let percentage of percentages" >
        <!-- später Bild -->
        {{ course }}
        <p>{{ description }}</p>
        <ion-note item-right>{{ percentage }}</ion-note>
    </ion-item>

</ion-list>

and that’s home.ts

import { Component } from ‘@angular/core’;

import { NavController } from ‘ionic-angular’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

courses;
descriptions;
percentages;

constructor(public navCtrl: NavController) {
this.initializeCourses();
this.initializeDescriptions();
this.initializePercentages();
}

initializeCourses() {
this.courses = [
‘Bruchrechnung I’,
‘Bruchrechnung III’,
‘Bruchrechnung (Textaufgaben)’
];
}

initializeDescriptions() {
this.descriptions = [
‘Hier lernst du die Grundlagen.’,
‘Hier kannst du deine Kenntnisse vertiefen.’,
‘Hier findest du Anwendungsbeispiele.’
];
}

initializePercentages() {
this.percentages = [
‘99 %’,
‘20 %’,
‘1 %’
];
}

getCourses(ev) {
// Reset items back to all of the items
this.initializeCourses();

// set val to the value of the ev target
var val = ev.target.value;

// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
  this.courses = this.courses.filter((course) => {
    return (course.toLowerCase().indexOf(val.toLowerCase()) > -1);
  })
}

}
}