if文の条件分岐：正しく判断されていない

Question

if文条件分岐についてです。
どうも条件が正しく入らず、else if に入ってしまいます。

rangeで数値を24まで回しています。

_.range(24).forEach((h) => {
			_.range(60).forEach((m) => {
				let index: number = h * 60 + m;
				let realHour: number = (h + 4) % 24;
				// 5分刻みで残すデータ
				if (index % 5 === 0) {
					// 不足データ新規作成。
					if (!returnMinuteList[index]) {
						returnMinuteList[index] = {
							timeClassName: "",
							isZeroMinute: false,
							hourString: "",
							channelProgramList: []
						};
					}

					// プロパティの初期化。
					returnMinuteList[index].timeClassName = (String("00" + realHour).slice(-2) + String("00" + m).slice(-2));
					returnMinuteList[index].isZeroMinute = (m === 0);
					returnMinuteList[index].hourString = String(realHour);
					returnMinuteList[index].channelProgramList = [];
				// 不要データはundefined
				} else {
					returnMinuteList[index] = undefined;
				}
			});
			if (0 <= h && h < 12) {
				this.ampm = "午前";
			} else if (12 <= h && h < 24) {
				this.ampm = "午後";
			};
			return this.ampm;
		});

下記が該当のソースコードです。
011までは午前という表示
1223までは午後という表記にしたいと考えています。
条件として足らないのでしょうか？
※①〜④はコンソールに出力した結果です。

console.log(h); // ① 0,1,2,3,4,5,6,7,8,9,10,11...23
if (0 <= h && h < 12) {
  console.log(h); // ② 0,1,2,3,4,5,6,7,8,9,10,11
　　　　this.ampm = "午前";
} else if (12 <= h && h < 24) {
　　　　console.log(h); // ③ 12,13,14,15,16...23
　　　　this.ampm = "午後";
};
console.log(h); // ④ 0,1,2,3,4,5,6,7,8,9,10,11...23
return this.ampm;

↓コメントを受けて追加しました。

試したこと

HTML側では *ngIf　を利用して表示させています。
これだと午前午後の表記になってしまいます。
これではngifの条件分岐がなされていないのでしょうか？

<th *ngIf="minute.isZeroMinute" rowspan="12"><ng-container *ngIf="am">{{am}}</ng-container><ng-container *ngIf="pm">{{pm}}</ng-container>{{minute.hourString}}<br>時</th>

export class Component {

am: string = "";
pm: string = "";


if (0 <= h && h < 12) {
	return this.am = "午前";
} else if (12 <= h && h < 24) {
	return this.pm = "午後";
};

}

Comments

[itagagaki]

> 0~11までは午前という表示
> 12~23までは午後という表記にしたいと考えています。
> 条件として足らないのでしょうか？
> ※①〜④はコンソールに出力した結果です。

コンソール出力結果を見ると正しく分岐しているように見えるのですが？

[xxx0_0xxx]

回答ありがとうございます。
画面上はなぜか「午後」表記しかされないのです。

[退会済みユーザー]

this.ampm = "午前"; だったり、this.ampm = "午後";　という行があることから、ご質問にあるコードは、思いつく限りでは、（1)何らかのクラスのメソッドに含まれる。あるいは(2) 何らかのfunction に含まれるコードで、この関数は実行されるときに何らかのオブジェクトに bind して実行される。というものだと思いましたが、いずれにしろ、this.ampm = "午前"; と　this.ampm = "午後";　によって ”24個の何か”　の それぞれのampm プロパティに"午前"または"午後"が設定されることを期待しており、それがうまくいってない、という状況のように推測しました。もしそうであれば、このコードの呼ばれるコンテキスト（背景）が分かるように、つまりthisに何が入ってくるか分かるような範囲のコードを掲載しないと、何とも言えない質問になっているかと思います。

[yuuyu]

> 画面上はなぜか「午後」表記しかされないのです。
画面上に出力するコードはどこにありますか？
コード１つ目をみる限りは、this.ampmに直接上書きをしているので最後の「午後」しか表示されませんし、
コード２つ目をみる限りは、条件分岐は正しく動作しているように見えます。

[xxx0_0xxx]

「上書き」というご指摘まさにそのとおりでした。
if (0 <= h && h < 12) {
return this.am = "午前";
} else if (12 <= h && h < 24) {
return this.pm = "午後";
};
この条件で一旦変えてみたのですが、「午前午後」と表記されてしまいます。

HTML側のコードも追加したので、アドバイスいただけたらと思います。